Table of contents
1. Create the basic style of the page
3. Implement the delete function (still in the function that binds the click of the "Add" button)
1. Determine what situation the modify button is in
1. Create the basic style of the page
姓名: <input type="text">
学号: <input type="text">
年龄: <input type="text">
性别: <input type="text">
学历: <input type="text">
<button class="add">添加</button>
<br>
<br>
<br>
<br>
<br>
<table border="1px" width="800px" cellspacing="0" align="center">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>性别</th>
<th>学历</th>
<th>删/改</th>
</tr>
</thead>
<tbody>
</tbody>
</table>Realization effect:
2. Implement the add function. After binding and clicking the add button, the entered information will be rendered to the page form.
Using string concatenation, innerHTML will recognize tags
let addBut = document.querySelector(".add");
let inp = document.querySelectorAll("input");
let arr = [...inp];
console.log(arr);
let str1 = "";
addBut.onclick = function () {
//let str1="";
let str = "<tr>";
for (let i = 0; i < arr.length; i++) {
str = str + `<td>${inp[i].value}</td>`
console.log(inp[i].value);
}
str = str + `<td><button class="rev">修改</button><button class="del">删除</button></td>`
str = str + "</tr>";
console.log(str);
str1 = str1 + str;
console.log(str1);
document.querySelector("table tbody").innerHTML = str1;
for (let i = 0; i < arr.length; i++) {
inp[i].value = "";
}3. Implement the delete function (still in the function that binds the click of the "Add" button)
//实现删除功能
let del = document.querySelectorAll(".del");
//console.log(del);
for (let i = 0; i < del.length; i++) {
del[i].onclick = function () {
del[i].parentElement.parentElement.remove();
str1 = document.querySelector("table tbody").innerHTML;
console.log(str1);
}
}
4. Implement the modification function (still in the function that binds the click of the "Add" button)
1. Determine what situation the modify button is in
This button has two situations
showing 东西 东西的东西 meant "Modify".
The button displays the word " Save ". It can be clicked to save, and the word " Modify "
The if statement is used here to judge the situation. The code is as follows:
//实现修改功能
let rev = document.querySelectorAll(".rev");
console.log(rev);
for (let i = 0; i < rev.length; i++) {
rev[i].onclick = function () {
if (rev[i].innerHTML == "修改") {
rev[i].innerHTML = "保存";
let cols = rev[i].parentElement.parentElement.children;
for (let j = 0; j < cols.length - 1; j++) {
console.log(cols[j]);
let inp = document.createElement("input");//添加输入框input元素节点
let str = cols[j].innerText;
cols[j].innerHTML = "";
cols[j].appendChild(inp);
inp.value = str;
str1 = document.querySelector("table tbody").innerHTML;
}
}
else if (rev[i].innerHTML == "保存")
{
let cols = rev[i].parentElement.parentElement.children;
rev[i].innerHTML = "修改";
for (let j = 0; j < cols.length - 1; j++) {
let str = cols[j].children[0].value;
cols[j].children[0].remove();
cols[j].innerHTML =str;
str1 = document.querySelector("table tbody").innerHTML;
}
}
}
}5. Complete code
<!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>
td {
text-align: center;
}
</style>
</head>
<body>
姓名: <input type="text">
学号: <input type="text">
年龄: <input type="text">
性别: <input type="text">
学历: <input type="text">
<button class="add">添加</button>
<br>
<br>
<br>
<br>
<br>
<table border="1px" width="800px" cellspacing="0" align="center">
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>性别</th>
<th>学历</th>
<th>删/改</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
let addBut = document.querySelector(".add");
let inp = document.querySelectorAll("input");
let arr = [...inp];
console.log(arr);
let str1 = "";
addBut.onclick = function () {
//let str1="";
let str = "<tr>";
for (let i = 0; i < arr.length; i++) {
str = str + `<td>${inp[i].value}</td>`
console.log(inp[i].value);
}
str = str + `<td><button class="rev">修改</button><button class="del">删除</button></td>`
str = str + "</tr>";
console.log(str);
str1 = str1 + str;
console.log(str1);
document.querySelector("table tbody").innerHTML = str1;
for (let i = 0; i < arr.length; i++) {
inp[i].value = "";
}
//实现删除功能
let del = document.querySelectorAll(".del");
//console.log(del);
for (let i = 0; i < del.length; i++) {
del[i].onclick = function () {
del[i].parentElement.parentElement.remove();
str1 = document.querySelector("table tbody").innerHTML;
console.log(str1);
}
}
//实现修改功能
let rev = document.querySelectorAll(".rev");
console.log(rev);
for (let i = 0; i < rev.length; i++) {
rev[i].onclick = function () {
if (rev[i].innerHTML == "修改") {
rev[i].innerHTML = "保存";
let cols = rev[i].parentElement.parentElement.children;
for (let j = 0; j < cols.length - 1; j++) {
console.log(cols[j]);
let inp = document.createElement("input");//添加输入框input元素节点
let str = cols[j].innerText;
cols[j].innerHTML = "";
cols[j].appendChild(inp);
inp.value = str;
str1 = document.querySelector("table tbody").innerHTML;
}
}
else if (rev[i].innerHTML == "保存")
{
let cols = rev[i].parentElement.parentElement.children;
rev[i].innerHTML = "修改";
for (let j = 0; j < cols.length - 1; j++) {
let str = cols[j].children[0].value;
cols[j].children[0].remove();
cols[j].innerHTML =str;
str1 = document.querySelector("table tbody").innerHTML;
}
}
}
}
}
</script>
</body>
</html>6. Achieve results
1.Add
2.Delete
Delete Zhang Si:
3.Modify
Modify the name of the third party to "Little Four" and the education background to "Elementary School"
Click to modify
to modify
Click to save