- it
- 在页面上根据数据，动态创建表格，并附带删除功能
在页面上根据数据，动态创建表格，并附带删除功能，可以删除表格中的某一项
<!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>
table,
td {
border: 2px solid #000;
border-collapse: collapse;
}
table {
width: 800px;
height: 500px;
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>序号
</td>
<td>姓名
</td>
<td>年龄
</td>
<td>性别
</td>
<td>操作
</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var arr = [
{
name: 'Jack',
age: 18,
gender: '男'
}, {
name: 'Rose',
age: 20,
gender: '女'
}, {
name: 'Top',
age: 22,
gender: '男'
}
]
function create() {
var str = ""
arr.forEach(function (item, index) {
str += "<tr>"
str += "<td>" + (index + 1) + "</td>"
for (var key in item) {
str += "<td>" + item[key] + "</td>"
}
str += "<td class='del' index='" + index + "'>删除</td>"
str += "</tr>"
});
var tb = document.querySelector("tbody")
tb.innerHTML = str
event()
}
create()
function event() {
var del = document.querySelectorAll(".del")
for (var i = 0; i < del.length; i++){
del[i].onclick =function(){
var index =this.getAttribute("index")
arr.splice(index,1)
}
}
creat()
}
</script>
</body>
</html>
