<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse; /*相邻边合并*/
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
<html>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</html>
<script>
var data = [
{
name: "小点点",
subject: "JavaScript",
score: 100,
},
{
name: "玛卡巴卡",
subject: "JavaScript",
score: 90,
},
{
name: "汤咘哩咘",
subject: "JavaScript",
score: 98,
},
{
name: "唔思迪西",
subject: "JavaScript",
score: 60,
},
];
// 在tbody里创建行 通过数组的长度来创建行数
var tbody = document.querySelector('tbody');
// 获取单元格操作
for(var i = 0;i < data.length;i++){
// 创建tr行
var tr = document.createElement('tr')
tbody.appendChild(tr)
// 行里面创建单元格 td
for(var k in data[i]){
var td = document.createElement('td')
td.innerHTML = data[i][k]
tr.appendChild(td)
}
// 创建删除的单元格
var td = document.createElement('td')
td.innerHTML = "<a href='javascript:;'>删除</a>"
tr.appendChild(td)
}
// 删除操作
var del = document.querySelectorAll('a')
for(var i =0;i < del.length;i++){
del[i].onclick = function(){
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>效果图：
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
