代码重点：
1.var datas=[{ }, { }, { }] ; 用数组准备数据 2.行数是通过数组的长度创建（datas.length)，包含数据的列数是根据数组中每个对象的属性的个数创建 (datas[i] ) , 都是通过for循环遍历，外面的for循环遍历行，里面的for循环遍历列，从而创建单元格
3.td.innerHTML=datas[i][k]; 把数组中每个对象的每个属性值依次赋给单元格 td
k得到的是属性名 obj[k]得到的是属性值 datas[i]=obj datas[i][k]=obj[k]
4.最后一列的所有“删除”的单元格单独创建，也是根据行数创建
5.td.innerHTML="< a href='javascript:;'>删除< /a >"; href属性等于“javascript:;” ,可以避免页面跳转
6.tbody.removeChild(this.parentNode.parentNode) 删除操作中是tbody需要删除某一个孩子（某一行），表示为当前点击的a链接所在单元格的所在行， this.parentNode为td单元格， this.parentNode.parentNode为tr行，注意层级关系
<!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{
background-color: rgb(250, 193, 107);
width: 500px;
text-align: center;
/* 边框合并模式 */
border-collapse: collapse;
}
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:'喜洋洋',
id:1001,
score:100
},
{
name:'美洋洋',
id:1002,
score:90
},
{
name:'小灰灰',
id:1003,
score:95
},
{
name:'懒洋洋',
id:1004,
score:80
}];
// 1.往tbody里面创建行 有几个人(通过数组的长度)就创建几行
var tbody = document.querySelector('tbody');
for(var i = 0; i <datas.length; i++){ //外面的for循环管行 tr
// 创建tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2.行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数
for(var k in datas[i]){ //里面的for循环管列td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值data[i][k]赋值给td
// k得到的是属性名 obj[k]得到的是属性值 datas[i]=obj datas[i][k]=obj[k]
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3.创建'删除'的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 4.删除操作
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>
效果如下：
点击删除按钮后：
