1.案例分析
1.利用对象生成假的数据，用来模拟数据库的数据。
2.核心算法：利用createElement生成表格(生成 tr , td )，注意逻辑关系。
1.css代码
table th {
width: 100px;
height: 50px;
border: 1px solid black;
}
td {
color: green;
text-align: center;
border: 1px solid black;
font-size: 18px;
}
2.html代码
姓名科目成绩操作
3.JavaScript代码
var stus = [{ //假数据
name: '小明',
class: 'JavaScript',
score: 100
}, {
name: '小红',
class: 'JavaScript',
score: 98
}, {
name: '小白',
class: 'JavaScript',
score: 89
}, {
name: '小石',
class: 'JavaScript',
score: 85
}, {
name: '小石',
class: 'JavaScript',
score: 85
}];
//数据写入
var tbody = document.querySelector('tbody'); //找到tbody标签
for (var i = 0; i < stus.length; i++) { //对stus进行循环遍历，并建立tr标签
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in stus[i]) { //对假数据进行遍历
var td = document.createElement('td'); //新建td
td.innerHTML = stus[i][k]; //将对象数据写进td中
tr.appendChild(td);
}
//删除按钮的建立
var td = document.createElement('td');
td.innerHTML = '删除';
tr.appendChild(td);
}
//对a标签进行点击事件
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
tbody.removeChild(this.parentNode.parentNode);
//this.parentNode是a标签的父亲td， .parentNode是td的夫亲tr。
}
}
