整体思路：
1.将每一行的数据作为一个对象，然后将这些对象封装在一个数组中；
2、添加行tr，利用for循环（i的数量与数组的长度有关）；
3、内层for循环，创建每一行中的所有单元格td，单元格td的数量与对象中的属性个数有关，故用for...in...遍历对象即可
4、在每一行的最后，添加一个td，内容为a标签‘删除’；
5、最后给表格添加一个点击‘删除’后就删除整行的事件
以上，整个表格就创建完成了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.将每一行的数据作为一个对象，然后将这些对象封装在一个数组中（没有后台服务器的情况下，暂时采用这种方式添加）
var datas = [{
name: '李寻欢',
subject: 'javascript',
scores: 100
}, {
name: '周杰伦',
subject: 'javascript',
scores: 99
}, {
name: '陈奕迅',
subject: 'javascript',
scores: 98
}, {
name: '昼夜',
subject: 'javascript',
scores: 97
}, {
name: '柯南',
subject: 'javascript',
scores: 100
}]
// 2、添加行tr，利用for循环（i的数量与数组的长度有关）
// 获取元素
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
//创建行tr
var tr = document.createElement('tr');
//将新创建的行tr添加给tbody
tbody.appendChild(tr);
// 3、内层for循环，创建每一行中的所有单元格td，单元格td的数量与对象中的属性多少有关，故用for...in...
for (var k in datas[i]) {
// 创建td元素
var td = document.createElement('td');
// 将每个对象中的属性值传给td
td.innerHTML = datas[i][k];
//给tr添加td子元素
tr.appendChild(td);
}
//4、在每一行的最后，添加一个td，内容为a标签‘删除’
// 创建td新元素
var td = document.createElement('td');
//把a标签的‘删除’传给td
td.innerHTML = "<a href='javascript:;'>删除</ a>";
// 给tr添加上td
tr.appendChild(td);
}
//以上，整个表格就创建完成了
// 5、下面给表格添加点击‘删除’，就删除整行的事件
// 获取元素
var as = document.querySelectorAll('a');
// 添加事件
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
打开浏览器后，效果如图1：
动态生成表格效果图-1.png
点击删除任意一行，效果如图2，3，4
动态生成表格效果图-2.png
动态生成表格效果图-3.png
动态生成表格效果图-4.png
网友评论