点击编辑按钮无法将表格值设置到输入字段，函数参数修改失败

我能读取expN、expD、expA、expT的值，但无法为它们设置新值。点击编辑按钮后，我可以获取到该按钮兄弟元素的值，却无法将这些值赋值给对应的输入字段（expN、expD、expA、expT）。

添加支出的核心代码 #

expBtn.addEventListener("click", () => {
  const expN = expName.value;
  const expD = expDate.value;
  const expA = expAmount.value;
  const expT = expType.value;

  if (expT === "choose-type") {
    alert("Please choose the expense type !");
    return;
  }

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

  // 序号
  const td1 = document.createElement("td");
  const td1Text = document.createTextNode(tableChild.length - 1);
  td1.appendChild(td1Text);
  tr.appendChild(td1);

  // 支出类型
  const td2 = document.createElement("td");
  const td2Text = document.createTextNode(expT);
  td2.appendChild(td2Text);
  td2.classList.add("expT-data");
  tr.appendChild(td2);

  // 支出名称
  const td3 = document.createElement("td");
  const td3Text = document.createTextNode(expN);
  td3.appendChild(td3Text);
  td3.classList.add("expN-data");
  tr.appendChild(td3);

  // 支出日期
  const td4 = document.createElement("td");
  const td4Text = document.createTextNode(expD);
  td4.appendChild(td4Text);
  td4.classList.add("expD-data");
  tr.appendChild(td4);

  // 支出金额
  const td5 = document.createElement("td");
  const td5Text = document.createTextNode(expA + " Rs");
  td5.appendChild(td5Text);
  td5.classList.add("expA-data");
  tr.appendChild(td5);

  // 删除按钮
  const td6 = document.createElement("td");
  const td6Text = document.createTextNode("Delete");
  td6.append(td6Text);
  td6.classList.add("del-btn");
  tr.appendChild(td6);

  // 编辑按钮
  const td7 = document.createElement("td");
  const td7Text = document.createTextNode("Edit");
  td7.append(td7Text);
  td7.classList.add("edit-btn");
  tr.appendChild(td7);

  table.appendChild(tr);

  const editBtn = document.getElementsByClassName("edit-btn");
  editFun(editBtn, expN, expD, expA, expT);

  const delBtn = document.getElementsByClassName("del-btn");
  btnFun(delBtn);
});

// 删除按钮函数
function btnFun(delBtn) {
  Array.from(delBtn).forEach((e) => {
    e.addEventListener("click", (e) => {
      const a = e.currentTarget;
      a.parentElement.remove();
    });
  });
}

编辑按钮相关代码 #

function editFun(editBtn, expN, expD, expA, expT) {
  Array.from(editBtn).forEach((e) => {
    e.addEventListener("click", (e) => {
      const siblings = e.currentTarget.parentElement.childNodes;

      expT = siblings[1].innerText;
      expN = siblings[2].innerText;
      expD = siblings[3].innerText;
      expA = siblings[4].innerText;

      
    });
  });
}

核心问题 #

1. 局部变量混淆：editFun里修改的expN、expD等是函数参数的局部变量，和页面输入框元素（expName、expDate等）无关联，无法更新输入框内容。
2. 节点索引不可靠：childNodes会包含换行、空格这类文本节点，导致siblings[1]等不是目标元素，用children或class选择器更可靠。
3. 金额后缀未处理：金额显示时加了 Rs后缀，直接赋值回输入框会包含多余字符，需提取纯数字。
4. 重复绑定事件：每次添加新行都给所有edit-btn绑定事件，会导致同一按钮触发多次逻辑。

修复后的代码 #

修改expBtn事件处理逻辑（仅给新添加的按钮绑定事件）

expBtn.addEventListener("click", () => {
  const expN = expName.value;
  const expD = expDate.value;
  const expA = expAmount.value;
  const expT = expType.value;

  if (expT === "choose-type") {
    alert("请选择支出类型！");
    return;
  }

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

  // 序号
  const td1 = document.createElement("td");
  const td1Text = document.createTextNode(tableChild.length - 1);
  td1.appendChild(td1Text);
  tr.appendChild(td1);

  // 支出类型
  const td2 = document.createElement("td");
  const td2Text = document.createTextNode(expT);
  td2.appendChild(td2Text);
  td2.classList.add("expT-data");
  tr.appendChild(td2);

  // 支出名称
  const td3 = document.createElement("td");
  const td3Text = document.createTextNode(expN);
  td3.appendChild(td3Text);
  td3.classList.add("expN-data");
  tr.appendChild(td3);

  // 支出日期
  const td4 = document.createElement("td");
  const td4Text = document.createTextNode(expD);
  td4.appendChild(td4Text);
  td4.classList.add("expD-data");
  tr.appendChild(td4);

  // 支出金额
  const td5 = document.createElement("td");
  const td5Text = document.createTextNode(expA + " Rs");
  td5.appendChild(td5Text);
  td5.classList.add("expA-data");
  tr.appendChild(td5);

  // 删除按钮
  const td6 = document.createElement("td");
  const td6Text = document.createTextNode("Delete");
  td6.append(td6Text);
  td6.classList.add("del-btn");
  tr.appendChild(td6);

  // 编辑按钮
  const td7 = document.createElement("td");
  const td7Text = document.createTextNode("Edit");
  td7.append(td7Text);
  td7.classList.add("edit-btn");
  tr.appendChild(td7);

  table.appendChild(tr);

  // 绑定当前新行的删除事件
  td6.addEventListener("click", () => {
    tr.remove();
  });

  // 绑定当前新行的编辑事件
  td7.addEventListener("click", () => {
    // 通过class精准获取对应单元格内容
    const type = tr.querySelector(".expT-data").innerText;
    const name = tr.querySelector(".expN-data").innerText;
    const date = tr.querySelector(".expD-data").innerText;
    // 移除金额后缀，提取纯数字
    const amount = tr.querySelector(".expA-data").innerText.replace(" Rs", "");

    // 直接赋值给页面输入框元素
    expType.value = type;
    expName.value = name;
    expDate.value = date;
    expAmount.value = amount;
  });
});

移除冗余代码

不需要保留原有的editFun函数，也无需调用btnFun(delBtn)，因为已在添加行时单独给新按钮绑定了事件。

修复效果 #

点击编辑按钮后，对应行的支出类型、名称、日期、金额会自动填充到页面输入框中，解决无法赋值的问题。

内容的提问来源于stack exchange，提问作者Karan Rajput