<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box table {
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//先进行模拟一个数据
var json = [{
naem: 'zw',
age: 19,
sex: "男",
subject: '语文',
scre: 90
},
{
naem: 'zw',
age: 19,
sex: "男",
subject: '语文',
scre: 90
},
{
naem: 'zw',
age: 19,
sex: "男",
subject: '语文',
scre: 90
},
{
naem: 'zw',
age: 19,
sex: "男",
subject: '语文',
scre: 90
},
{
naem: 'zw',
age: 19,
sex: "男",
subject: '语文',
scre: 90
},
{
naem: 'zw',
age: 19,
sex: "男",
subject: '语文',
scre: 90
},
];
var headData = ["姓名", "年龄", "性别", "科目", "分数", "操作"];
var box = document.querySelector("#box");
var table = document.createElement("table");
box.appendChild(table);
table.style.backgroundColor = "pink";
table.style.width = "600px";
table.border = "1px";
var thead = document.createElement("thead");
table.appendChild(thead);
var tr = document.createElement("tr");
thead.appendChild(tr);
for (var i = 0; i < headData.length; i++) {
var th = document.createElement("th");
th.innerText = headData[i];
tr.appendChild(th);
}
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for (var j = 0; j < json.length; j++) {
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(var key in json[j]){
var td=document.createElement("td");
td.innerText=json[j][key];
tr.appendChild(td)
}
var a=document.createElement('a');
var td=document.createElement("td");
a.href="javascript:;"
a.innerText="删除";
tr.appendChild(td);
td.appendChild(a);
a.onclick=function(e){
// tbody.removeChild(e.target.parentNode.parentNode);
setTimeout(function () {
e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode);
},2000)
}
}
</script>
</body>
</html>