一、目前功能:
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>
效果图:
四:后续还会完善更新....