<script>
var datas = [{
name: '卡卡西',
subject: 'JavaScript',
grade: 100,
}, {
name: '鸣人',
subject: 'JavaScript',
grade: 80,
}, {
name: '小樱',
subject: 'JavaScript',
grade: 100,
}, {
name: '鹿丸',
subject: 'JavaScript',
grade: 98,
}];
var tbd = document.querySelector('tbody');
// 创建行
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement('tr');
tbd.appendChild(tr);
// 创建列
for (var k in datas[i]) {
var td = document.createElement('td');
// 调用对象里的值
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 删除列
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() {
tbd.removeChild(this.parentNode.parentNode);
}
}
</script>
注意:
1. 每行的数据可以放在一个对象里,几个对象放进一个数组里
2. 用createElement()创建行和列
3. 双层for循环,外层循环创建行,内层循环创建列
4. 外层是数组for(var i = 0; i < ...)内层是对象for(var k in ...)
5. 表格的内容,获取对象的属性值obj[k];
? 问题思考?删除操作在动态表格中要放在function外面,否则会自动删除一行,但是在留言案例中,要放在function里面,否则无效。???