javascript：更新所有<；td>；元素<；tr>；在文本框中单击“编辑”
我是javascript新手，我是Dom元素的工作人员，并使用该表创建crud的演示 积垢代码：javascript：更新所有<；td>；元素<；tr>；在文本框中单击“编辑”,javascript,html,jsobject,Javascript,Html,Jsobject,我是javascript新手，我是Dom元素的工作人员，并使用该表创建crud的演示 积垢代码： <html> <head> <style type="text/css"> td { border: 1px solid #dddddd; text-align: left; padding: 8px; }
<html>
<head>
<style type="text/css">
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<input type="text" id="name"><br /><br />
<input type="text" id="age"><br /><br />
<input type="text" id="email"><br /><br />
<input type="button" value="addNew" id="addNew"><br />
<div id="output"></div>
<script>
let rows = [{
name: "John",
age: 20,
email: "abc@gmail.com"
}, {
name: "Jack",
age: 50,
email: "pqr@gmail.com"
}, {
name: "Son",
age: 45,
email: "xyz@gmail.com"
}];
window.onload = building();
let addNew = document.getElementById("addNew");
addNew.onclick = function () {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let email = document.getElementById("email").value;
rows.push({
name,
age,
email
});
console.log(rows);
building();
}
function building() {
let html = "<h1>student-Info</h1><table align='center'>";
for (let i = 0; i < rows.length; i++) {
html += '<tr id="id' + i + '"data-row="' + i + '">';
html += "<td>" + rows[i].name + "</td>";
html += "<td>" + rows[i].age + "</td>";
html += "<td>" + rows[i].email + "</td>";
html += "<td><a href='#' data-action='delete'>DELETE</a></td>";
html += "<td><a href='#' data-action='edit'>Edit</a></td>";
html += '</tr>';
}
html += "</table>";
document.querySelector('#output').innerHTML = html;
let deleted = document.querySelectorAll('[data-action="delete"]');
for (let i = 0; i < deleted.length; i++) {
deleted[i].addEventListener('click', function () {
event.preventDefault();
let ival = this.closest('[data-row]').getAttribute('data-row');
let r = rows.splice(ival, 1);
building();
console.log(r);
})
}
let edited = document.querySelectorAll('[data-action="edit"]');
console.log(edited);
for (let i = 0; i < edited.length; i++) {
edited[i].addEventListener('click', function () {
event.preventDefault();
let row = this.closest('[data-row]');
let rid = row.getAttribute('data-row');
let td = row.firstElementChild;
let input = document.createElement("input");
input.type = "text";
input.value = td.innerText;
td.innerHTML = "";
td.appendChild(input);
input.onblur = function () {
td.removeChild(input);
td.innerHTML = input.value;
rows[rid] = input.value;
}
})
}
}
</script>
</html>
运输署{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
让行=[{
姓名：“约翰”，
年龄:20,，
电子邮件：“abc@gmail.com"
}, {
姓名：“杰克”，
年龄:50,，
电子邮件：“pqr@gmail.com"
}, {
姓名：“儿子”，
年龄:45,，
电子邮件：“xyz@gmail.com"
}];
window.onload=building（）；
让addNew=document.getElementById（“addNew”）；
addNew.onclick=函数（）{
让name=document.getElementById（“name”）.value；
让age=document.getElementById（“age”）.value；
让email=document.getElementById（“email”）.value；
推({
名称
年龄，
电子邮件
});
console.log（行）；
建筑物（）；
}
功能建设（）{
让html=“学生信息”；
for（设i=0；i任何人有任何想法，请帮忙解决。谢谢您在代码中为firstElement应用了输入字段，但是您需要获得所有可编辑的表字段并像这样更新它
运输署{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
让行=[{
姓名：“约翰”，
年龄:20,，
电子邮件：“abc@gmail.com"
}, {
姓名：“杰克”，
年龄:50,，
电子邮件：“pqr@gmail.com"
}, {
姓名：“儿子”，
年龄:45,，
电子邮件：“xyz@gmail.com"
}];
window.onload=building（）；
让addNew=document.getElementById（“addNew”）；
addNew.onclick=函数（）{
让name=document.getElementById（“name”）.value；
让age=document.getElementById（“age”）.value；
让email=document.getElementById（“email”）.value；
推({
名称
年龄，
电子邮件
});
建筑物（）；
}
功能建设（）{
让html=“学生信息”；
for（设i=0；i{
让输入=document.createElement（“输入”）；
input.type=“text”；
input.value=td.innerText；
td.innerHTML=“”；
td.附加子项（输入）；
input.onblur=函数（）{
td.removeChild（输入）；
td.innerHTML=input.value；
行[rid][td.dataset.col]=input.value；
}
})
})
}
}
tr