js动态添加删除表格行的代码

发布时间:2019-12-01编辑:脚本学堂
分享一例js动态添加与删除表格行的代码,有需要的朋友参考下。

例子,js实现动态添加与删除表格行。
 

复制代码 代码示例:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>增加table行_www.jb200.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">&nbsp;</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>