`
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<SCript>
var dates = [
{
name:'张三',
subject: '计算机',
score: 100
},
{
name:'李四',
subject: '计算机',
score: 89
},
{
name:'王五',
subject: '计算机',
score: 91
}
];
//往tody里面创建行：有几个人（通过数组的长度）我们就创建几行
var tb = document.querySelector('tbody');
for (var i = 0; i < dates.length;i++) {
//创建行、外面的for循环管行tr
var tr = document.createElement('tr');
tb.appendChild(tr);
//2、行里面创建单元格（跟数据有关系的3个单元格）td单元格的数量取决于每个对象里面的属性个数 for循环
for (var key in dates[i]) {
//把有对象里面的属性值 datas[i][k] 给td
//console.log(datas[i][k])
var td = document.createElement('td');
td.innerHTML = dates[i][key];
tr.appendChild(td);
}
//for (var key in obj) {
// k得到的是属性名
// boj[key]得到属性值
// }
//3、创建有删除的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>'
tr.appendChild(td);
}
//删除操作开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tb.removeChild(this.parentNode.parentNode)
}
}
</SCript>
</body>
`
