表格之删除功能

来源：互联网发布：满族饮食知乎编辑：程序博客网时间：2024/06/16 01:20

js在表格中删除一行

<!DOCTYPE HTML><html>  <head>    <title> 在表格中删除一行（javascript）</title>  </head> <body>   <table id="tb1" border="1px">    <tr><td>111</td><td><input type="button" name="button" value="删除" onclick="del(this)"></td>    <tr><td>222</td><td><input type="button" name="button" value="删除" onclick="del(this)"></td>    <tr><td>333</td><td><input type="button" name="button" value="删除" onclick="del(this)"></td>    <tr><td>444</td><td><input type="button" name="button"  value="删除" onclick="del(this)"></td>   </table>  </body></html>

js在表格中删除一行的JS代码

  <script type="text/javascript">function del(obj){//方法1删除对应的tr行 var rowIndex=obj.parentElement.rowIndex;document.getElementById('tb1').deleteRow(rowIndex); //方法2删除对应的tr行 var oTr=obj.parentNode.parentNode; obj.parentNode.parentNode.parentNode.removeChild(oTr); }   </script>

方法

利用table中的deleteRow删除行方法，前提需获取点击删除的该行的rowIndex。
通过父元素删除子节点的方法：removeChild。值得注意的是在使用parentNode的时候注意。

0 0