66 lines
2.1 KiB
HTML
66 lines
2.1 KiB
HTML
<!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>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<input type="text" id="name" value="">
|
|
<button onclick="add()">添加</button>
|
|
<table id="biao">
|
|
<tr>
|
|
<th>姓名</th>
|
|
<th>性别</th>
|
|
<th>年龄</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</table>
|
|
<script>
|
|
var table1 = document.getElementById("biao");
|
|
var info = [{ name: "张三", sex: 1, age: 23 }, { name: "刘亦菲", sex: 2, age: 38 }, { name: "蔡徐坤", sex: 1, age: 24 }]
|
|
|
|
function show() {
|
|
console.log(info.length)
|
|
var len=info.length
|
|
for (let i = 0; i < info.length; i++) {
|
|
var tr = document.createElement("tr");
|
|
tr.innerHTML = "<td>" + info[i].name + "</td><td>" + info[i].sex + "</td><td>" + info[i].age + "</td><td><button onclick='del("+i+")'>删除</button></td>";
|
|
table1.append(tr)
|
|
}
|
|
// for (let i = 0; i < info.length; i++) {
|
|
// var tr = document.createElement("tr");
|
|
// tr.innerHTML = "<td>" + info[len-1].name + "</td><td>" + info[len-1].sex + "</td><td>" + info[len-1].age + "</td><td><button onclick='del("+(len-1)+")'>删除</button></td>";
|
|
// table1.append(tr)
|
|
// }
|
|
}
|
|
show()
|
|
function add() {
|
|
table1.innerHTML="<tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>"
|
|
var name=document.getElementById("name").value;
|
|
console.log(name)
|
|
info.push({name:name,sex:2,age:18})
|
|
|
|
show()
|
|
}
|
|
function del(e){
|
|
console.log(e)
|
|
table1.innerHTML="<tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr>"
|
|
info.splice(e+1,1)
|
|
// e+1
|
|
show()
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |