需要达到的效果:
思路:表格中的数据存储在一个数组中,每一个数组元素是一个对象,然后通过遍历数组中的对象来创建行,一个对象就是一行,然后遍历里面的对象元素,对象里面的值就是单元格里面存的值。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>申申</td>
<td>javascript</td>
<td>100</td>
<td>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
<script>
// 表格元素内容
var datas = [{
name: 'oliver',
subject: 'python',
score: 89
}, {
name: 'violet',
subject: 'C++',
score: 90
}, {
name: 'iu',
subject: 'C#',
score: 92
}];
// 动态创建表格
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
var trs = document.createElement('tr');
tbody.appendChild(trs);
// 遍历对象
for (var k in datas[i]) {
console.log(datas[i][k]);
var ths = document.createElement('td');
ths.innerHTML = datas[i][k];
trs.appendChild(ths);
}
var thss = document.createElement('td');
thss.innerHTML = "<a href='#'>删除</a>";
trs.appendChild(thss);
}
// 删除单元格
// 获取所有的a链接
var ass = document.querySelectorAll('a');
// 删除整个行
for (var i = 0; i < ass.length; i++) {
ass[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
</body>
</html>