js实现对table的增加行和删除行的操作方法
如下所示：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<body>
<scripttype="text/javascript">
//添加方法
functionaddtr()
{
//vartrid=0;
vartab=document.getElementByIdx_x("signFrame");
//添加行
varnewTR=tab.insertRow(tab.rows.length);
alert(tab.rows.length);
//trid++;
//获取序号=行索引
varxuhao=newTR.rowIndex.toString();
alert(xuhao);
newTR.id="tr"+xuhao;
//添加列:序号
varnewNameTD=newTR.insertCell(0);
//添加列内容
newNameTD.innerHTML=xuhao;
//添加列:日期
varnewNameTD=newTR.insertCell(1);
//添加列内容
newNameTD.innerHTML="<inputname='time"+xuhao+"'id='time"+xuhao+"size='19'onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;'onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;'/>";
//添加列:方式
varnewEmailTD=newTR.insertCell(2);
//添加列内容
newEmailTD.innerHTML="<selectstyle='width:70px;'name='way"+xuhao+"'id='way"+xuhao+"'><optionvalue='电话'>电话</option><optionvalue='QQ'>QQ</option></select>";
//添加列:备注
varnewTelTD=newTR.insertCell(3);
//添加列内容
newTelTD.innerHTML="<inputsize='60'name='remark"+xuhao+"'id='remark"+xuhao+"'type='text'onclick='showid(this)'/>";
//添加列:删除按钮
varnewDeleteTD=newTR.insertCell(4);
//添加列内容
newDeleteTD.innerHTML="<divalign='center'style='width:40px'><ahref='javascript:;'onclick=\"deltr('tr"+xuhao+"')\">删除</a></div>";
}
</script>
<scripttype="text/javascript">
//删除其中一行
functiondeltr(trid)
{//alert(trid);
vartab=document.getElementByIdx_x("signFrame");
varrow=document.getElementByIdx_x(trid);
varindex=row.rowIndex;//rowIndex属性为tr的索引值，从0开始
tab.deleteRow(index);//从table中删除
//重新排列序号，如果没有序号，这一步省略
varnextid;
for(i=index;i<tab.rows.length;i++){
tab.rows[i].cells[0].innerHTML=i.toString();
nextid=i+1;
remark=document.getElementByIdx_x("remark"+nextid);
remark.id="remark";
}
}
</script>
<scripttype="text/javascript">
functionshowid(txt)
{alert(txt.id);
}
</script>
<body>
<inputtype="button"value="保存"onclick="addtr()"/>
<tableborder="1px"width="70%"id="signFrame">
<trid="trHeader">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<trid="trHeader">
<tdwidth="50px">序号</td>
<tdwidth="170px">时间</td>
<tdwidth="100px">方式</td>
<td>备注</td>
<tdwidth="80px">操作</td>
</tr>
<trid="trHeader">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<trid="trHeader">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<trid="trHeader">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<trid="trHeader">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
以上就是小编为大家带来的js实现对table的增加行和删除行的操作方法全部内容了，希望大家多多支持毛票票~