js动态添加删除表格行的代码
例子，js实现动态添加与删除表格行。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>增加table行_www.jiaochengji.com</title>
</head>
< script language="javascript">// example: obj = findobj("image1");
function findobj(theobj, thedoc){
var p, i, foundobj;
if(!thedoc) thedoc = document; if( (p = theobj.indexof("?")) > 0 && parent.frames.length) { thedoc = parent.frames[theobj.substring(p+1)].document; theobj =
theobj.substring(0,p); } if(!(foundobj = thedoc[theobj]) && thedoc.all) foundobj = thedoc.all[theobj]; for (i=0; !foundobj && i < thedoc.forms.length; i++) foundobj
= thedoc.forms[i][theobj]; for(i=0; !foundobj && thedoc.layers && i < thedoc.layers.length; i++) foundobj = findobj(theobj,thedoc.layers[i].document); if(!foundobj &&
document.getelementbyid) foundobj = document.getelementbyid(theobj); return foundobj;}
//添加一个参与人填写行
function addsignrow(){ //读取最后一行的行号，存放在txttrlastindex文本框中
var txttrlastindex = findobj("txttrlastindex",document);
var rowid = parseint(txttrlastindex.value);
var signframe = findobj("signframe",document);
//添加行
var newtr = signframe.insertrow(signframe.rows.length);
newtr.id = "signitem" + rowid;
//添加列:序号
var newnametd=newtr.insertcell(0);
//添加列内容
newnametd.innerhtml = newtr.rowindex.tostring();
//添加列:姓名
var newnametd=newtr.insertcell(1);
//添加列内容
newnametd.innerhtml = "<input name='txtname" + rowid + "' id='txtname" + rowid + "' type='text' size='12' />";
//添加列:电子邮箱
var newemailtd=newtr.insertcell(2);
//添加列内容
newemailtd.innerhtml = "<input name='txtemail" + rowid + "' id='txtemail" + rowid + "' type='text' size='20' />";
//添加列:电话
var newteltd=newtr.insertcell(3);
//添加列内容
newteltd.innerhtml = "<input name='txttel" + rowid + "' id='txttel" + rowid + "' type='text' size='10' />";
//添加列:手机
var newmobiletd=newtr.insertcell(4);
//添加列内容
newmobiletd.innerhtml = "<input name='txtmobile" + rowid + "' id='txtmobile" + rowid + "' type='text' size='12' />";
//添加列:公司名
var newcompanytd=newtr.insertcell(5);
//添加列内容
newcompanytd.innerhtml = "<input name='txtcompany" + rowid + "' id='txtcompany" + rowid + "' type='text' size='20' />";
//添加列:删除按钮
var newdeletetd=newtr.insertcell(6);
//添加列内容
newdeletetd.innerhtml = "<div align='center' style='width:40px'><a href='javascript:;' onclick=/"deletesignrow('signitem" + rowid + "')/">删除</a></div>";
//将行号推进下一行
txttrlastindex.value = (rowid + 1).tostring() ;
}
//删除指定行
function deletesignrow(rowid){
var signframe = findobj("signframe",document);
var signitem = findobj(rowid,document);
//获取将要删除的行的index
var rowindex = signitem.rowindex;
//删除指定index的行
signframe.deleterow(rowindex);
//重新排列序号，如果没有序号，这一步省略
for(i=rowindex;i<signframe.rows.length;i++){
signframe.rows[i].cells[0].innerhtml = i.tostring();
}
}//清空列表
function clearallsign(){
if(confirm('确定要清空所有参与人吗？')){
var signframe = findobj("signframe",document);
var rowscount = signframe.rows.length;
//循环删除行,从最后一行往前删除
for(i=rowscount - 1;i > 0; i--){
signframe.deleterow(i);
}
//重置最后行号为1
var txttrlastindex = findobj("txttrlastindex",document);
txttrlastindex.value = "1";
//预添加一行
addsignrow();
}
}
< /script>
<body>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="signframe">
<tr id="trheader">
<td width="27" bgcolor="#96e0e2">序号</td>
<td width="64" bgcolor="#96e0e2">用户姓名</td>
<td width="98" bgcolor="#96e0e2">电子邮箱</td>
<td width="92" bgcolor="#96e0e2">固定电话</td>
<td width="86" bgcolor="#96e0e2">移动手机</td>
<td width="153" bgcolor="#96e0e2">公司名称</td>
<td width="57" align="center" bgcolor="#96e0e2"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="submit" value="添加参与人" onclick="addsignrow()" />
<input type="button" name="submit2" value="清空" onclick="clearallsign()" />
<input name='txttrlastindex' type='hidden' id='txttrlastindex' value="1" />
</div>
</body>
< /html>
您可能感兴趣的文章：
JS动态添加与删除控件的代码一例
JQuery动态删除Table表格的行与列
js动态添加删除表格行的代码
js中动态的添加删除表格行代码
基于JQuery的动态删除Table表格的行和列的代码
使用jquery为table动态添加行的实现代码
js动态添加、修改、删除对象的属性与方法
动态添加与删除select中Option对象的JS脚本
jquery动态添加option示例
jquery动态增加、删除表格行的例子