javascript实现删除表格的方法

2023-06-14 11:06:14 815人浏览泡泡鱼

摘要

这篇文章主要介绍javascript实现删除表格的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！javascript实现删除表格的方法：首先创建节点；然后移除table下面的子节点tr，删除表格的行，代码为【ta

这篇文章主要介绍javascript实现删除表格的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

javascript实现删除表格的方法：首先创建节点；然后移除table下面的子节点tr，删除表格的行，代码为【table.removeChild(this.parentnode.parentNode)】。

javascript实现删除表格的方法：

效果图：

javascript实现删除表格的方法

代码如下：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/CSS">  #box{  margin:0 auto;  background:yellow;  border:4px double #808080;  width:600px;  text-align:center;  }  #box input{  width:130px;  }  #box table{  margin:5px 0;  background:lawngreen;  } </style> <script type="text/javascript">  onload = function(){  var ainput = document.getElementsByTagName('input');  var bTn = document.getElementById('btn');  var table = document.getElementsByTagName('table')[0];//     //方法一//  bTn.onclick = function(){//   //   var oTr=document.createElement('tr');//创建节点//   table.appendChild(oTr);//创建table的子节点tr //   var oTd=document.createElement('td');//创建节点//   oTd.innerHTML=aInput[0].value;//给表格赋内容//   oTr.appendChild(oTd);//创建tr的子节点td//   //   var oTd=document.createElement('td');//创建节点//   oTd.innerHTML=aInput[1].value;//给表格赋内容//   oTr.appendChild(oTd);//创建tr的子节点td//   //   var oTd=document.createElement('td') ;//创建节点//   oTd.innerHTML=aInput[2].value;//给表格赋内容//   oTr.appendChild(oTd);//创建tr的子节点td //   var oTd=document.createElement('td') ;//创建节点//   oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容//   oTr.appendChild(oTd);//创建tr的子节点td //   oTd.getElementsByTagName('a')[0].onclick=function(){//   table.removeChild(this.parentNode.parentNode);//   //移除table下面的子节点tr//   }//删除表格行   //方法二  bTn.onclick = function(){    var oTr=document.createElement('tr');//创建节点   table.appendChild(oTr);//创建table的子节点tr   for(var i = 0; i < aInput.length-1; i ++){   var oTd=document.createElement('td');//创建节点   oTd.innerHTML=aInput[i].value;//给表格赋内容   oTr.appendChild(oTd);//创建tr的子节点td   }    var oTd=document.createElement('td') ;//创建节点   oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容   oTr.appendChild(oTd);//创建tr的子节点td    oTd.getElementsByTagName('a')[0].onclick=function(){   table.deleteRow(1);   }  }  }   </script> </head> <body> <div id="box">  ID:<input type="text" name="" id="" value="" />  姓名：<input type="text" name="" id="" value="" />  电话：<input type="text" name="" id="" value="" />  <input type="button" name="btn" id="btn" value="保存" style="width:50px;"/>  <table border="" cellspacing="" cellpadding="" width="600px" >  <tr>  <td>Id</td>  <td>name</td>  <td>tal</td>  <td>操作</td>  </tr>    </table> </div>  </body></html>

以上是“javascript实现删除表格的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: javascript实现删除表格的方法

本文链接: https://www.lsjlt.com/news/270228.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341