这是一个关于网页表格数据管理的实现示例，包括添加、修改和删除功能。用户可以通过输入框填写信息，点击添加按钮将数据添加到表格中，每个表格行内设有删除和修改按钮。点击修改时，输入框变为文本显示数据，再次点击保存则更新数据；点击删除则移除相应行。此代码段展示了基础的前端数据操作逻辑。
一、目前功能：
1.实现数据的添加
2.实现数据的修改
3.实现数据的保存
4.实现数据的删除
二、基本思想：
1.添加数据只需要在对应的列表项后面再添加行保存用户输入的数据即可，用户输入的数据是保存在input节点的value属性里，我们循环遍历input节点的类数组即可获取到数据。
2.数据的修改和删除功能，只需要我们获取到整行的数据即可进行操作，而修改操作是对单个数据进行修改，所以还需要再循环遍历这个类数组。
三、功能实现代码：
<body>
姓名: <input type="text" >
学号: <input type="text" >
年龄: <input type="text" >
性别: <input type="text" >
学历: <input type="text" >
<button class="add">添加</button>
<br>
<br>
<br>
<br>
<table border="1px" width="800px" height="10px" cellspacing="0" style="text-align: center;">
<tr>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
<td>性别</td>
<td>学历</td>
<td>删除</td>
</tr>
</table>
<script>
//1.点击添加,tr新建一行
//2.根据value值创建单元格,将value值作为单元格内容,多加一个单元格放置删除
//3.然后将单元格放进行中,行放进表中
let add = document.querySelector(".add");
let input = document.querySelectorAll("body>input");
let table = document.querySelector("table");
add.onclick = function () {
let tr = document.createElement("tr");
console.log(input[0].value);
tr.align = "center";
//创建单元格
for (let i = 0; i < input.length; i++) {
let td = document.createElement("td")//输一次创建一个单元格
td.innerHTML = input[i].value;
tr.appendChild(td);
}
let tdLast = document.createElement("td");
let delBut = document.createElement("button");
delBut.innerHTML = "删除";
tdLast.appendChild(delBut);
delBut.οnclick=myDel;
let updateBut = document.createElement("button");
updateBut.innerHTML = "修改";
tdLast.appendChild(updateBut);
updateBut.onclick = myUpdate;
tr.appendChild(tdLast);
table.appendChild(tr);
}
function myUpdate(){
let arrSon =this.parentElement.parentElement.children;
if(this.innerHTML=="修改"){
this.innerHTML="保存";
for (let i = 0; i < arrSon.length-1; i++) {
let myInp=document.createElement("input");
myInp.value=arrSon[i].innerHTML;
arrSon[i].innerHTML="";
arrSon[i].appendChild(myInp);
}
}else{
this.innerHTML="修改";
for (let i = 0; i < arrSon.length-1; i++) {
arrSon[i].innerHTML=arrSon[i].children[0].value;
}
}
}
function myDel(){
this.parentElement.parentElement.remove();
}
</script>
</body>
效果图：
四:后续还会完善更新....
4337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
