<!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 {
border-collapse: collapse;
/* text-align: center; */
}
th,
tr,
td,
table {
border: 1px solid gray;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>修改</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
var arr = [
{
name: "张三",
subject: "语文",
score: "99"
},
{
name: "张三",
subject: "语文",
score: "299"
},
{
name: "张三",
subject: "语文",
score: "199"
},
{
name: "张三",
subject: "语文",
score: "9"
}
]
// 因没有数据库，故先创建一个数组里面放对象
let tbody = document.querySelector("tbody")
// 获取元素
for (i = 0; i < arr.length; i++) {
// 遍历数组
var tr = document.createElement("tr")
// 创建行
tbody.appendChild(tr)
// 添加行
for (var k in arr[i]) {
// 遍历数组
let td = document.createElement("td")
// 创建单元格
td.innerHTML = arr[i][k]
// 导入单元格的内容，即从上面的数组中
tr.appendChild(td)
// 添加单元格
}
let td = document.createElement("td")
// 创建删除列（单元格）
td.innerHTML = "<a href='javascript:;'>删除</a>"
// 导入a标签，删除
tr.appendChild(td)
// 添加删除 单元格
let a=document.querySelectorAll("a")
// 获取 所有a为一个数组
for(let i=0;i<a.length;i++){
// 遍历a
a[i].onclick=function(){
// a 即删除点击事件
tbody.removeChild(this.parentNode.parentNode)
// 删除 代码
}
}
}
</script>
</body>
</html>成果图
