js实现对table的增加行和删除行的操作方法

如下所示：
<！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=utf-8" /><title>无标题文档</title></head><body><script type="text/javascript">//添加方法function addtr（）{//var trid=0;var tab=document.getElementByIdx_x（"signFrame"）;//添加行var newTR = tab.insertRow（tab.rows.length）; alert（tab.rows.length）;//trid++;//获取序号=行索引var xuhao=newTR.rowIndex.toString（）; alert（xuhao）;newTR.id = "tr" + xuhao;//添加列:序号var newNameTD=newTR.insertCell（0）;//添加列内容newNameTD.innerHTML = xuhao;//添加列:日期var newNameTD=newTR.insertCell（1）;//添加列内容newNameTD.innerHTML = "<input name="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;" />";//添加列:方式var newEmailTD=newTR.insertCell（2）;//添加列内容newEmailTD.innerHTML = "<select style="width:70px;" name="way" + xuhao + "" id="way" + xuhao + ""><option value="电话">电话</option><option value="QQ">QQ</option></select>";//添加列:备注var newTelTD=newTR.insertCell（3）;//添加列内容newTelTD.innerHTML = "<input size="60" name="remark" + xuhao + "" id="remark" + xuhao + "" type="text" onclick="showid（this）" />";//添加列:删除按钮var newDeleteTD=newTR.insertCell（4）;//添加列内容newDeleteTD.innerHTML = "<div align="center" style="width:40px"><a href="javascript:;" onclick="deltr（"tr" + xuhao + ""）">删除</a></div>";}</script><script type="text/javascript">//删除其中一行function deltr（trid）{//alert（trid）;var tab=document.getElementByIdx_x（"signFrame"）;var row=document.getElementByIdx_x（trid）;var index=row.rowIndex;//rowIndex属性为tr的索引值，从0开始 tab.deleteRow（index）; //从table中删除//重新排列序号，如果没有序号，这一步省略var nextid;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><script type="text/javascript">function showid（txt）{alert（txt.id）;}</script><body><input type="button" value="保存" onclick="addtr（）" /><table border="1px" width="70%" id="signFrame"><tr id="trHeader"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr><tr id="trHeader"><td width="50px">序号</td><td width="170px">时间</td><td width="100px">方式</td><td>备注</td><td width="80px">操作</td></tr><tr id="trHeader"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr><tr id="trHeader"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr><tr id="trHeader"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr><tr id="trHeader"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr></table> </body></html>
以上就是小编为大家带来的js实现对table的增加行和删除行的操作方法全部内容了，希望大家多多支持脚本之家~