<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tHead>
<tr>
<td>序号</td>
<td>名字</td>
<td>操作</td>
</tr>
</tHead>
<tBody id="tbody">
</tBody>
</table>
<div>
<input type="number" id="input_id">
<input id="input_name">
<button onclick="add()">添加</button>
<br>
<input type="number" id="update_id">
<input id="update_name">
<button onclick="upd()">更改</button>
</div>
</body>
<script>
let names = [{id:4,name:"北京"},{id:2,name:"上海"},{id:3,name:"广州"}]
let tbody = document.querySelector('#tbody')
let str=''
function add(){
let id = document.getElementById("input_id").value
let name = document.getElementById("input_name").value
console.log(names.push({id:id,name:name}));
show()
}
function upd(){
let update_id = document.querySelector("#update_id").value
let update_name = document.querySelector("#update_name").value
let index = names.findIndex(item=>item.id === Number(update_id))
console.log(names.splice (index,1,{id:update_id,name:update_name}))
show()
}
function remove(id){
let index = names.findIndex(item => item.id===id)
names.splice(index,1)
show()
}
function show(){
for (let i=0;i<names.length;i++){
str=str+`
<tr>
<td>${names[i].id}</td>
<td>${names[i].name}</td>
<td><button class="del" onclick="remove(${names[i].id})">删除</button></td>
</tr>
`
}
tbody.innerHTML=str
str=''
}
show()
</script>
</html>
最终页面图
de6881d7a85bbc03055e4b44c88a7b5.png
