创建数据
因为里面的数据都是动态的，我们需要js动态生成，所以需要准备好模拟数据，采用对象形式存储。
代码语言：javascript复制 <script>
//1.先准备好数据
var datas = [{
name: '张三',
subject: 'JavaScript',
score: 100
},
{
name: '张三',
subject: 'JavaScript',
score: 90
},
{
name: '张三',
subject: 'JavaScript',
score: 80
},
{
name: '张三',
subject: 'JavaScript',
score: 70
},
]
</script>创建行
所有的数据都是放到tbody里面，所以先生成行，再生成单元格。
因为行很多，所以我们需要用到循环创建多个行（对应多少人）
代码语言：javascript复制 //创建行，有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i ) {
var tr = document.createElement('tr')
tbody.appendChild(tr);
}创建单元格并填充数据
每个行里面的有很多单元格（对应里面的数据），所以需要循环创建多个单元格，并把数据存入里面（双重for循环）
代码语言：javascript复制 for (var k in datas[i]) {
//创建单元格
var td = document.createElement('td');
//把对象里面的属性只给td
td.innerHTML = datas[i][k];
tr.appendChild(td);
}创建删除单元格
最后一列单元格是删除，需要单独创建单元格。
代码语言：javascript复制//创建有删除俩个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="JavaScript:;">删除</a>';
tr.appendChild(td);添加删除操作
代码语言：javascript复制 var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i ) {
as[i].onclick = function () {
//点击a删除当前a所在的行
tbody.removeChild(this.parentNode.parentNode);
}
}完整代码
代码语言：javascript复制<!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>Document</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 cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//1.先准备好数据
var datas = [{
name: '张三',
subject: 'JavaScript',
score: 100
},
{
name: '张三',
subject: 'JavaScript',
score: 90
},
{
name: '张三',
subject: 'JavaScript',
score: 80
},
{
name: '张三',
subject: 'JavaScript',
score: 70
},
]
//创建行，有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i ) {
var tr = document.createElement('tr')
tbody.appendChild(tr);
//行里面创建单元格，数量取决于每个对象里面的属性个数 for循环遍历对象
for (var k in datas[i]) {
//创建单元格
var td = document.createElement('td');
//把对象里面的属性只给td
td.innerHTML = datas[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 i = 0; i < as.length; i ) {
as[i].onclick = function () {
//点击a删除当前a所在的行
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
