JS操作表，增加行，删除行

最新推荐文章于 2017-11-28 22:10:12 发布

Fee_

最新推荐文章于 2017-11-28 22:10:12 发布

阅读量864

点赞数

文章标签： input button function javascript table delete

本文链接：https://blog.csdn.net/feilong806/article/details/6593025

版权

<html>
 <head>
  <title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
  <script language="javascript">
    function addRow()
   {
     var newRow = document.all("tblGrid").insertRow();

  //得到表的对象并插入一行，下面是插入了行以后，填充相应的列节点，如下面所示
     var oCell = newRow.insertCell();//插入列的节点
     oCell.innerHTML = "<input type='text' name='t1'>";//列里面填充的值，innerHtml值列内的所有元素    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";
   
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>   <input type='button' value='Delete' οnclick='removeRow(this);'/>";  
   }
   function removeRow(src)
   {
    var oRow = src.parentElement.parentElement;  //获取当前事件的父节点
    document.all("tblGrid").deleteRow(oRow.rowIndex);  //删除当前列
   }
 
  </script>
 </head>
 <body>
    <table id="tblGrid" style="table-layout:fixed">
   <tr>
    <td width="150px">编号</td>
    <td width="150px">姓名</td>
    <td width="250px">年龄</td>
   </tr>
  
  </table>
  <hr>
  <input type="button" value="增 加 行" onClick="addRow();" />
   </body>
</html>