Javascript 如何使我的按钮更新正确的表行值

我刚刚结束了JavaScript DOM操作，但我发现不管我要编辑哪一行，都只更新最后一行。完整的代码位于此处：

//编辑任何被单击行的函数（运行良好）
函数编辑（）{
submit.style.display=“无”；
update.style.display=“block”；
for（设i=0；i

调用编辑功能时，向其中传递一个事件：

function edit(event) { 

单击事件将被单击按钮，然后只需找到父项的父项即可获得单击的行按钮：

event.parentElement.parentElement.

并使用该选项更新正确的行：

    update.onsubmit = function updateData() {
        update.style.display = "none";
        submit.style.display = "block";
        event.parentElement.parentElement.cells[0].innerHTML = document.getElementById('fname-2').value + " " + document.getElementById('lname-2').value;
        event.parentElement.parentElement.cells[1].innerHTML = document.getElementById('email-2').value;
        event.parentElement.parentElement.cells[2].innerHTML = document.getElementById('gender-2').value;
        event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox').value;
return false;
    };

请注意，更新时不需要这里的按钮

编辑： 我不应该为您修改整个代码，我向您展示了如何获得正确的行，这是问题所在，而不是这个…

不要使用此选项：

let status = document.getElementById("checkBox");
status.onchange = function checkBoxStatus() {
  if (status.checked) {
    document.getElementById("checkBox").value = "Yes";
  } else {
    document.getElementById("checkBox").value = "No";
  }

使用以下命令：

function checkBoxStatus(event) {
  if (event.checked) {
    event.value = "Yes";
  } else {
    event.value = "No";
  }

您正在更改时使用内联HTML，不需要另一个

在HTML中的两个复选框输入上，您有两个复选框，

checkbox

和

checkBox2

onchange=“checkBoxStatus（this）”

，只需将目标事件设置为单击一个复选框的值

而且

checkBoxStatus

和

checkBoxStatus

不一样，请检查您的打字错误

您还必须根据表中的值编辑并设置（其他）复选框

checkBox2

：

  if (event.parentElement.parentElement.cells[3].innerHTML === "No") {
    document.getElementById('checkBox2').checked = false;
  } else {
    document.getElementById('checkBox2').checked = true;
  }

编辑后（将调用

函数checkBoxStatus（event）

）设置要提交的正确选项：

event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox2').value;

代码段已更新，所有内容已修复

工作示例：

让rIndex；
const dataTable=document.getElementById（'database'），
提交=document.getElementById（“数据”），
update=document.getElementById（“数据-2”）；
让rows=dataTable.children[1].getElementsByTagName（'tr'）；
//激活复选框状态的函数
功能checkBoxStatus（事件）{
如果（已选中事件）{
event.value=“是”；
}否则{
event.value=“否”；
}
}
//页面日期和时间函数
函数currentDate（）{
让showDate=document.getElementById（'showDate'），
d=新日期（），
天数=[“星期日”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”]，
今天=天[d.getDay（）]，
月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
thisMonth=月[d.getMonth（）]，
日期=d.getDate（），
year=d.getFullYear（），
小时=d.getHours（），
分钟=d.getMinutes（），
second=d.getSeconds（），
子午线；
如果（小时>=12）{
子午线=“PM”；
}否则{
子午线=“AM”；
}
如果（小时==0）{
小时=12；
}
如果（小时>=13和21小时）{
小时=（小时-12）；
}
如果（小时<10）{
小时=“0”+小时；
}
如果（秒<10）{
秒=“0”+秒；
}
如果（分钟<10）{
分钟=“0”+分钟；
}
showDate.textContent=今天+“”+本月+“”+日期+“”+年+“+小时+”：“+分钟+”：“+秒+“”+子午线；
const t=setTimeout（函数（）{
currentDate（）；
}, 1000);
}
currentDate（）；
//函数，该函数在表中显示提交表单数据
函数showData（）{
设tableRows=document.createElement（'tr'），
td1=document.createElement（'td'），
td2=document.createElement（'td'），
td3=document.createElement（'td'），
td4=document.createElement（'td'），
td5=document.createElement（'td'），
td6=document.createElement（'td'）；
td1.innerHTML=document.getElementById（'fname'）.value+“”+document.getElementById（'lname'）.value；
td2.innerHTML=document.getElementById（'email'）.value；
td3.innerHTML=document.getElementById（'gender'）。值；
td4.innerHTML=document.getElementById（“复选框”）.value；
td5.innerHTML=“”；
td6.innerHTML=“”；
tableRows.appendChild（td1）；
tableRows.appendChild（td2）；
tableRows.appendChild（td3）；
tableRows.appendChild（td4）；
tableRows.appendChild（td5）；
tableRows.appendChild（td6）；
submit.reset（）；
dataTable.children[1].insertBefore（tableRows，dataTable.children[0].childNodes[tableRows.length]）；
返回false；
};
//用于编辑正在单击的任何行的函数
功能编辑（事件）{
if（event.parentElement.parentElement.cells[3].innerHTML==“否”）{
document.getElementById（'checkBox2'）。checked=false；
}否则{
document.getElementById（'checkBox2'）。checked=true；
}
submit.style.display=“无”；
update.style.display=“block”；
for（设i=0；ievent.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox2').value;