<!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>
// 先准备好学生的数据
// 数组里面放对象来存储学生数据
var datas = [
{
name: "魏璎洛",
subject: "JavaScript",
score: 100,
},
{
name: "小乔",
subject: "JavaScript",
score: 98,
},
{
name: "傅恒",
subject: "JavaScript",
score: 99,
},
{
name: "明玉",
subject: "JavaScript",
score: 99,
},
];
// ----------------------------
// 2. 往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);
// 行 里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
// 里面的for 循环管 列 td
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当前所在的行(tr) (a的爸爸的爸爸就是tr)
tbody.removeChild(this.parentNode.parentNode);
// 删除 tbody 里面 this就是当前点击的a 的 爸爸 的 爸爸 也就是删除了 tr
};
}
</script>
</body>
</html>
实现效果: