js实现添加删除表格（两种方法）
程序员文章站
2023-12-06 09:15:52
效果图：
代码如下：
效果图：
代码如下：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持!
下一篇： php ajax数据传输和响应方法