信息录入系统_内容录入系统-CSDN博客

本文链接：https://blog.csdn.net/qq_52928592/article/details/129149562

<style>

table {

border-collapse: collapse;

width: 1200px;

border: 2px solid;

}

table td {

border: 2px solid;

}

</style>

</head>

<body>

姓名:<input type="text" />

<br />

学号:<input type="text" />

<br />

年龄:<input type="number" />

<br />

性别:<input type="text" />

<br />

学历:<input type="text" />

<br />

<table>

<thead>

</thead>

</table>

// 1.获取input属性框中的内容

let myinput = document.querySelectorAll("input");

let myadd = document.querySelector("button");

let tbody = document.querySelector("tbody");

// 2.点击button按钮,将value值添加到tbody中

myadd.onclick = function () {

// 2.1 创建行tr

let tr = document.createElement("tr");

[...myinput].forEach((ele) => {

// 2.2 创建列

let td = document.createElement("td");

td.innerHTML = ele.value;

tr.appendChild(td);

});

// 2.3 创建操作的一列并添加到tr上

let td = document.createElement("td");

td.innerHTML = `<button class="edit">修改</button><button class='del'>删除</button>`;

tr.appendChild(td);

// 2.4 将tr添加到tbody上

tbody.appendChild(tr);

// 3.删除

let del = document.querySelectorAll(".del");

[...del].forEach((ele) => {

ele.onclick = delFn;

});

// 4.修改

let edit = document.querySelectorAll(".edit");

[...edit].forEach((ele) => {

ele.onclick = editFn;

});

// 5.清空输入框

[...myinput].forEach((ele) => {

ele.value = "";

});

};

function delFn() {

this.parentNode.parentNode.remove();

}

function editFn() {

if (this.innerHTML == "修改") {

this.innerHTML = "保存";

// 4.1 获取所有td中的值

let childs = this.parentNode.parentNode.children;

for (let i = 0; i < childs.length - 1; i++) {

// 4.2 将值添加到input输入框中

let mypin = document.createElement("input");

mypin.value = childs[i].innerHTML;

childs[i].innerHTML = "";

childs[i].appendChild(mypin);

}

} else {

this.innerHTML = "修改";

// 4.3 保存,将input输入框中的值添加到tr中

let childs = this.parentNode.parentNode.children;

for (let i = 0; i < childs.length - 1; i++) {

childs[i].innerHTML = childs[i].children[0].value;

}

</script>