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

2019-11-20 08:45:41

字体：大中小

来源：转载

供稿：网友

如下所示：

<!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的增加行和删除行的操作方法全部内容了，希望大家多多支持武林网~

上一篇：js拼接html字符串的注意事项

下一篇：微信小程序 wx.request(OBJECT)发起请求详解