动态增加删除表格记录 -- 风信Java论坛 -- Powered by JavaWind.Net

一个jsp页面中需要为动态地增加删除表格记录

由于是个新手，这颇花了我一些时间：现分享如下

代码在IE6上测试通过：

运行复制保存 xhtml代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>dynamic add and delete a line from a table!</title>
<script type="text/javascript">
var record=1;
/*********************
* chris Hu：
* Add a record into the table
*
*/
function addLine(){
var tb_body = document.getElementById('tb_body');
var line=document.createElement('tr');
var cb=document.createElement('td');
var name=document.createElement('td');
var password=document.createElement('td');
var email=document.createElement('td');
record++;
line.id ='tr_'+record;
cb.innerHTML='<input name="input_cb" id="cb_'+record+'" type="checkBox"/>';
name.innerHTML='<input name="input_name" id="name_'+record+'" type="text"/>';
password.innerHTML='<input name="input_password" id="password_'+record+'" type="text"/>';
email.innerHTML='<input name="input_email" id="email_'+record+'" type="text"/>';
cb.align='center';
line.appendChild(cb);
line.appendChild(name);
line.appendChild(password);
line.appendChild(email);
tb_body.appendChild(line);
}
/*********************
* chris Hu：
* Delete the record witch's checkbox is checked
* but ensure there's at least one line remained
*
*/
function delLine(){
var cbList=document.getElementsByName('input_cb');
var selecedTR='';
for(var i=0;i<cbList.length;i++){
if(cbList[i].checked==true){
var idName=cbList[i].id;
idNameidName=idName.replace(/cb_/ig,"tr_");
selecedTR+=idName+',';
}
}
var ary=selecedTR.split(',');
if(ary.length-1==cbList.length){
alert("ensure there's one record remained！");
document.getElementById('selectAll').checked=false;
selectAll();
return false;
}
for(var j=0;j<ary.length-1;j++){
/* in ie use this:
* document.getElementById(ary[j]).removeNode(true);
* ff the other
*/
document.getElementById(ary[j]).parentNode.removeChild(document.getElementById(ary[j]));
}
document.getElementById('selectAll').checked=false;
}
/*********************
* chris Hu：
* Select/disselect all the records
*
*/
function selectAll(){
var cb_all=document.getElementById('selectAll');
if(cb_all.checked==true){
var cbList=document.getElementsByName('input_cb');
for(var i=0;i<cbList.length;i++){
cbList[i].checked=true;
}
}else{
var cbListB=document.getElementsByName('input_cb');
for(var i=0;i<cbListB.length;i++){
cbListB[i].checked=false;
}
}
}
</script>
</head>
<body>
<hr width="100%" color="#adedaa"/>
<input type="button" value="AddLine" onclick="addLine()"/>
<input type="button" value="DelLine" onclick="delLine()"/>
<hr width="100%" color="#adedaa"/>
<div>
<table width="50%" border="1" cellspacing="0" cellpadding="0" summary="">
<thead bgcolor="#dafafa">
<tr>
<th width="5%"><input type="checkBox" id="selectAll" onclick="selectAll()" /></th>
<th width="20%">RegName</th>
<th width="20%">PassWord</th>
<th width="20%">Email</th>
</tr>
</thead>
<tbody id="tb_body">
<tr id="tr_1">
<td width="5%" align="center"><input name="input_cb" id="cb_1" type="checkBox"/></td>
<td width="20%"><input name="input_name" id="name_1" type="text"/></td>
<td width="20%"><input name="input_password" id="password_1" type="text"/></td>
<td width="20%"><input name="input_email" id="email_1" type="text"/></td>
</tr>
</tbody>
<tfoot bgcolor="#dadada"><tr><td colspan="4">User's information!</td></tr></tfoot>
</table>
</div>
<hr width="100%" color="#adedaa"/>
</body>
</html>