js table动态创建
<head lang="en">
<meta charset="UTF-8">
<title></title>
<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>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</table>
</body>
<script>
//准备数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
/*
* 1.获取当前表格table
* 2.根据datas数组遍历确定创建多少个tr行
* 3.根据datas数组遍历出具体对象的值
*/
var table = document.getElementsByTagName("table")[0];
for(var i = 0; i < datas.length; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
for(var j in datas[i]) {
console.log(j)
var td = document.createElement("td");
//console.log(datas[i][j]);
td.innerHTML = datas[i][j];
tr.appendChild(td);
}
var td = document.createElement("td");
td.innerHTML = "<a href='#'>删除</a>"
tr.appendChild(td);
}
debugger;
var a = document.getElementsByTagName("a");
for(var i = 0; i < a.length; i++) {
a[i].onclick = function() {
this.parentNode.parentNode.remove()
}
}
</script>