效果图
结构
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
CSS
table {
width: 500px;
margin: 100px auto;
background-color: pink;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
JS
function Star (name, type, blood)
{
this.name = name;
this.type = type;
this.blood = blood;
}
var cz = new Star('村长', '葵花点穴手', '32');
var xh = new Star('笑豪', '弹吉他', '59');
var xn = new Star('笑楠', '召唤师峡谷', '79');
var dates = [cz, xh, xn, {
name: '少主',
subject: 'JavaScript',
score: 10
}, {
name: '羽神',
subject: 'JavaScript',
score: 80
}, {
name: '张飞',
subject: 'JavaScript',
score: 63
}, {
name: '关于',
subject: 'JavaScript',
score: 0
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < dates.length; i++)
{
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in dates[i])
{
var td = document.createElement('td');
td.innerHTML = dates[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 ()
{
tbody.removeChild(this.parentNode.parentNode)
}
}