js实现添加删除表格（两种方法）

2019-11-19 16:42:57

字体：大中小

来源：转载

供稿：网友

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网!

上一篇：jQuery EasyUI tree增加搜索功能的实现方法

下一篇：JS/jquery实现一个网页内同时调用多个倒计时的方法