表格内容使用js生成
效果预览
html部分
<table border="1px" cellspacing="0" cellpadding="10">
<thead>
<tr style="background-color: #999999; height: 60px">
<td>姓名</td>
<td style="width: 150px">科目</td>
<td>成绩</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
css部分
<style>
table {
text-align: center;
}
</style>
js部分
<script>
//准备好学生的数据
var dates = [
{
name: '吴彦祖',
subject: 'javaScript',
score: 100
},
{
name: '孔智超',
subject: 'javaScript',
score: 80
},
{
name: '栗志青',
subject: 'javaScript',
score: 60
},
{
name: '姚小煜',
subject: 'javaScript',
score: 40
}
]
//先获取tbody
var tbody = document.querySelector('tbody')
for (var i = 0; i < dates.length; i++) {
//创建tr元素
var tr = document.createElement('tr')
tbody.appendChild(tr)
//给行里面添加td
for (var k in dates[i]) {
var td = document.createElement('td')
//给td添加内容
for (var s in dates[i]) {
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 j = 0; j < as.length; j++) {
//获取删除链接
as[j].onclick = function () {
//删除节点
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>