<%@ 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>