<style>
table {
border-collapse: collapse;
text-align: center;
width: 500px;
background: #666;
color: aliceblue;
line-height: 40px;
}
a{color: salmon;}
table td {
border: 1px solid #ccc;
}
</style>
<table align="center">
<thead>
<tr>
<td>姓名</td>
<td>科目</td>
<td>成绩</td>
<td>操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var datas = [{
name: '小菜',
subject: 'javascript',
score: 99
},
{
name: '小鑫',
subject: 'html',
score: 88
},
{
name: '小旺',
subject: 'css',
score: 66
},
{
name: '小赵',
subject: 'jQuery',
score: 89
},
]
console.log(datas.length)
var tbody = document.querySelector('tbody');
// 创建tbody中的tr
for (var i = 0; i < datas.length; i++) {
//1.创建tr节点
var tr = document.createElement('tr');
tbody.appendChild(tr)
//for循环遍历 datas数组中各个元素的属性
for (var k in datas[i]) {
//2.创建td节点
var td = document.createElement('td');
tr.appendChild(td);
//动态生成内容 datas[i][k]:表示数组第i个中第k个属性的值
td.innerHTML = datas[i][k];
}
//3.创建带有删除的单元格
var td = document.createElement('td')
td.innerHTML = "<a href='javascript:;'>删除</a>"
tr.appendChild(td)
}
//4. 创建 删除的点击事件
var dels = document.querySelectorAll('a')
for(var i =0;i<dels.length;i++){
dels[i].onclick = function(){
//删除该行
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
怎么用JavaScript动态创建一个表格
最新推荐文章于 2024-04-27 13:27:37 发布