老裴帮助关于Javascript动态创建表格的小练习
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>动态创建表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript"
src="<%=path%>/js/jquery/jquery-1.3.2.js"></script>
</head>
<script type="text/javascript">
/**
功能描述：动态创建表格
日期：2010-7-14
作者：老裴
--------------------------------------
*/
/*
添加行
*/
function add(){
var obj_table =document.getElementById("table_1");
var tr_len = obj_table.rows.length;
var obj_tr = document.createElement("tr");
obj_table.appendChild(obj_tr);
obj_tr.id ="tr_"+tr_len;
obj_tr.align="center";
var cell_0 = document.createElement("td");
obj_tr.appendChild(cell_0);
cell_0.innerHTML="<input type='checkBox' name='CB' id='CB'/>";
var cell_1 = document.createElement("td");
obj_tr.appendChild(cell_1);
cell_1.id="XH_"+tr_len;
cell_1.innerHTML = tr_len;
var cell_2 = document.createElement("td");;
obj_tr.appendChild(cell_2);
cell_2.innerHTML = "XXXXX";
var cell_3 = document.createElement("td");;
obj_tr.appendChild(cell_3);
cell_3.innerHTML = "<a href=\"javascript:del('tr_"+tr_len+"');\" id=\"add\" style=\"text-decoration: none;\">删除</a>";
}
/**
添加行
*/
function addItem(){
var obj_table = document.getElementById("table_1");
var tr_len = obj_table.rows.length;
var obj_tr = obj_table.insertRow(tr_len);
obj_tr.id="tr_"+tr_len;
obj_tr.align="center";
var obj_cell_0= obj_tr.insertCell(0);
obj_cell_0.innerHTML="<input type='checkBox' name='CB' id='CB'/>";
var obj_cell_1= obj_tr.insertCell(1);
obj_cell_1.innerHTML=tr_len;
var obj_cell_2= obj_tr.insertCell(2);
obj_cell_2.innerHTML="<input type=\"text\" name=\"content\" id=\"content\" value=\"12345678965654\" sytle=\"width:100%\"/>";
var obj_cell_3= obj_tr.insertCell(3);
obj_cell_3.innerHTML="<a href=\"javascript:del('tr_"+tr_len+"');\" id=\"del\" style=\"text-decoration: none;\">删除</a>";
}
/*
删除行
*/
function del(id){
var obj_table =document.getElementById("table_1");
var tr_len = obj_table.rows.length;
for(var i=1;i <tr_len; i++ ){
var tr = obj_table.rows[i].id;
if(id == tr){
obj_table.deleteRow(i);
break;
}
}
//重新排序
repeateSort();
}
/**
重新排序
*/
function repeateSort(){
var obj_table =document.getElementById("table_1");
var tr_len = obj_table.rows.length;
for(var i=1;i <tr_len; i++ ){
var cell_len = obj_table.rows[i].cells.length;
obj_table.rows[i].cells[1].innerHTML=i;
}
}
/**
全选
*/
function selectAll(){
var obj_checkbox = document.getElementsByName("CB");
var cb_len = obj_checkbox.length;
var isFull = 0;
for(var i=0;i< cb_len;i++){
var flag = obj_checkbox[i].checked;
if(flag == true){
isFull++;
}
obj_checkbox[i].checked =true;
}
if(isFull == cb_len){
for(var i=0;i< cb_len;i++){
obj_checkbox[i].checked =false;
}
}
}
/*
反选
*/
function reverseSelect(){
var obj_checkbox= document.getElementsByName("CB");
var cb_len = obj_checkbox.length;
for(var i=0;i< cb_len; i++){
if(obj_checkbox[i].checked){
obj_checkbox[i].checked=false;
}else{
obj_checkbox[i].checked=true;
}
}
}
/**
删除选中行
*/
function delSelect(){
var obj_table = document.getElementById("table_1");
var obj_checkbox= document.getElementsByName("CB");
var cb_len = obj_checkbox.length;
var rowArr = new Array();
var k = 0;
for(var i=0;i< cb_len; i++){
var flag = obj_checkbox[i].checked;
if(flag ==true){
var rownum = i+1;
obj_table.deleteRow(rownum);
i--;
cb_len--;
}
}
repeateSort();
}
/**
全选
*/
function selectAll2(){
var obj_ck = jQuery("input[type=checkBox]");
if(obj_ck.attr("checked")){
obj_ck.removeAttr("checked");
}else{
obj_ck.attr("checked",true);
}
}
/**
反选
*/
function reverseSelect2(){
var obj_ck = jQuery("input[type=checkBox]");
obj_ck.each(function(){
if(jQuery(this).attr("checked")){
jQuery(this).removeAttr("checked")
}else{
jQuery(this).attr("checked",true)
}
});
}
/**
删除选择的行
*/
function delSelect2(){
var obj_ck = jQuery("input[type=checkBox]");
obj_ck.each(function(){
if(jQuery(this).attr("checked")){
var obj_tr = jQuery(this).parent().parent();
obj_tr.remove();
}
});
//删除完毕后重新排序
repeateSort2();
}
/**
重新排序
*/
function repeateSort2(){
var obj_ck = jQuery("input[type=checkBox]");
var num = 1;
obj_ck.each(function(){
var td_xh = jQuery(this).parent().siblings().eq(0);
td_xh.html(num);
num++;
});
}
/*
获取页面元素值
*/
function getPageElements(){
var obj_pageEle = document.form1.elements;
var ele_len = obj_pageEle.length;
var eleArr = new Array(ele_len);
var eleStr = "";
for(var i=0;i<ele_len;i++ ){
var ele_id = obj_pageEle[i].id;
var ele_type = obj_pageEle[i].type;
var ele_val = obj_pageEle[i].value;
eleStr = "{id:"+ele_id+",type:"+ele_type+",value:"+ele_val+"}";
eleArr[i]=eleStr;
}
alert(eleArr);
}
/**
当页面加载的时候
*/
jQuery(document).ready(function(){
jQuery("#btn_elements").bind("click",getPageElements);
});
</script>
<center>
<body>
<fieldset>
<legend>
动态添加表格
</legend>
<form id="form1" name="form1" action="">
<table id="table_1" border="1" width="400px" cellspacing="0"
cellpadding="0" align="center">
<tr id="tr_0" align="center" bgcolor="#c0c0c0">
<td>
<a href="javascript:selectAll();" id="select"
style="text-decoration: none;">全选</a>/
<a href="javascript:reverseSelect();" id="select"
style="text-decoration: none;">反选</a>
</td>
<td>
序号
</td>
<td>
内容
</td>
<td>
<a href="javascript:addItem();" id="add"
style="text-decoration: none;">添加</a>/
<a href="javascript:delSelect();" id="delSelect"
style="text-decoration: none;">删除</a>
</td>
</tr>
</table>
<table id="table_2" border="1" width="400px" cellapacing="0"
cellpadding="0" align="center">
<tr>
<td>
<input type="button" id="btn_elements" value="计算页面的元素" />
</td>
<td>
 
</td>
<td>
 
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</center>
</html>