纯javascript对表格的删除,动态赋值 动态删除. 这里直接附带源码 。 没毛病,这个文章就是充数的,对上一个实例的一个补充
完整的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>student表格</title>
<style>
table{
border:1px solid #aaa;
border-collapse:collapse;
text-align: center;
width: 350px;
}
th,td,tr{
border:1px solid #aaa;
}
thead{
background-color: aqua;
}
tbody{
background-color: #eee;
}
tbody tr td a{
color:#888;
}
tbody tr td a:hover{
color:blue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th><th>学科</th><th>分数</th><th>操作</th>
</tr>
<thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
//定义数组
var students=[
{name: "陈奇",majop:"javascript",grade:100,control:"<a>删除</a>"},
{name: "刘好人",majop:"javascript",grade:100,control:"<a>删除</a>"},
{name: "罗贯中",majop:"javascript",grade:100,control:"<a>删除</a>"},
{name: "张三丰",majop:"javascript",grade:100,control:"<a>删除</a>"},
{name: "黄飞鸿",majop:"javascript",grade:100,control:"<a>删除</a>"},
{name: "小程序",majop:"zkelm.com",grade:100,control:"<a>删除</a>"},
]
//循环获取数组信息,students[1]= 一个对象 object
for(var i=0;i<students.length;i++){
//此时 students[0]={name: "陈奇",majop:"javascript",grade:100,control:"删除"}
//创造tr元素
var tr=document.createElement("tr");
//利用(x in object)枚举对象的键值
for(var x in students[i]){
//x 就是对象的建名:name,majop,grade,control
//创造td元素
var td=document.createElement("td");
//把txtNode文字节点加入到td中
td.innerHTML=students[i][x];
//把 td加入到tr中, 一共有4个键值所以加入四次
tr.appendChild(td);
}
document.querySelector("tbody").appendChild(tr);
}
//循环获取a元素
var table=document.querySelector("tbody");
var alist=document.querySelectorAll("a");
for(var i=0;i<alist.length;i++){
alist[i].onclick=function(){
table.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
运行结果:
南宁小程序开发:www.zkelm.com