<script>
// 1. 先准备好学生的数据
var datas = [{
name: '张三',
subject: 'JavaScript',
score: 100
}, {
name: '李四',
subject: 'JavaScript',
score: 98
}, {
name: '王五',
subject: 'JavaScript',
score: 99
}, {
name: '赵六',
subject: 'JavaScript',
score: 88
}];
// 2. 往tbody里面创建行:有几个人(通过数组的长度)就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行tr
// 创建tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 行里面创建单元格td,单元格的数量取决于每个对象里面的属性个数,for循环遍历对象datas[i]
for (var k in datas[i]) { // 里面的for循环管列td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值data[i][k]给td
td.innerHTML = data[i][k];
tr.appendChild(td);
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 4. 删除操作开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a,删除当前a所在的行(链接的父元素的父元素)
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>