js实现添加删除表格（两种⽅法）效果图：
代码如下：
<!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 = ElementsByTagName('input');
var bTn = ElementById('btn');
var table = ElementsByTagName('table')[0];
//
//⽅法⼀
//  lick = function(){
//
//  var ateElement('tr');//创建节点
/
/  table.appendChild(oTr);//创建table的⼦节点tr
//  var ateElement('td');//创建节点
//  oTd.innerHTML=aInput[0].value;//给表格赋内容
//  oTr.appendChild(oTd);//创建tr的⼦节点td
//
//  var ateElement('td');//创建节点
//  oTd.innerHTML=aInput[1].value;//给表格赋内容
//  oTr.appendChild(oTd);//创建tr的⼦节点td
//
//  var ateElement('td') ;//创建节点
//  oTd.innerHTML=aInput[2].value;//给表格赋内容
/
/  oTr.appendChild(oTd);//创建tr的⼦节点td
//  var ateElement('td') ;//创建节点
//  oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容
//  oTr.appendChild(oTd);//创建tr的⼦节点td
//  ElementsByTagName('a')[0].onclick=function(){
//  veChild(this.parentNode.parentNode);
//  //移除table下⾯的⼦节点tr
//  }//删除表格⾏
//⽅法⼆
var ateElement('tr');//创建节点
table.appendChild(oTr);//创建table的⼦节点tr
for(var i = 0; i < aInput.length-1; i ++){
var ateElement('td');//创建节点
oTd.innerHTML=aInput[i].value;//给表格赋内容
oTr.appendChild(oTd);//创建tr的⼦节点td
}
var ateElement('td') ;//创建节点
oTd.innerHTML='<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';//给表格赋内容
oTr.appendChild(oTd);//创建tr的⼦节点td
table.deleteRow(1);
}
}
}
</script>
</head>
<body>
js教程removechild<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="保存" />
<table border="" cellspacing="" cellpadding="" width="600px" >
<tr>
<td>Id</td>
<td>name</td>
<td>tal</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。