目录
二.实现添加功能.对添加按钮绑定点击后,将输入的信息渲染到页面表格
一.创建页面基本样式
姓名: <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>
实现效果:
二.实现添加功能.对添加按钮绑定点击后,将输入的信息渲染到页面表格
采用字符串拼接的方法,innerHTML会识别标签
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);
}
}
四.实现修改功能(仍然处于"添加"按钮绑定点击的函数中)
1.判断修改按钮处于什么情况
该按钮有两种情况
一种是未被修改,按钮显示"修改"字样,可以被点击后进行修改,字样变为"保存"
一种是正在被修改,按钮显示"保存"字样,可以被点击后进行保存,字样变为"修改"
这里用if语句进行情况判断,代码如下:
//实现修改功能
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;
}
}
}
}
五.完整代码
<!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>
六.实现效果
1.添加
2.删除
删除张四:
3.修改
修改小三的名字为"小四",学历为"小学"
点击修改
进行修改
点击保存