如何编辑tbody中全部td？点击非首个td却修改首个td问题排查

嘿，这个问题我太熟了！大概率是你在JS里获取要修改的时，只拿到了第一个匹配的元素，或者事件处理逻辑里没正确绑定当前点击的那个td。

问题根源分析 #

举个常见的错误例子：如果你用了document.querySelector('td')，这个方法只会返回页面中第一个符合选择器的元素。哪怕你给所有都绑了点击事件，点击时始终修改的都是这个第一个元素，自然其他点了也没反应。

解决方案（结合你的HTML片段） #

我先补全合理的表格结构，再写对应的JS逻辑，保证每个都能被正确修改：

第一步：给加标识区分字段

先给表格行里的加上data-field属性，用来区分是姓名还是地址：

<!-- 假设你的表格结构如下 -->
<table>
  <tr>
    <td data-field="name">name</td>
    <td data-field="address">adress</td>
  </tr>
</table>

<!-- 你的原有表单 -->
<form id="registrering">
  <label>Navn: <input id="inpnavn" placeholder="Raahim Khan" type="text" required></label>
  <label>Adresse: <input id="inpadresse" type="text" placeholder="Din adresse"></label>
  <!-- 新增保存按钮触发修改操作 -->
  <button type="button" id="saveEdit">Lagre endring</button>
</form>

第二步：编写正确的JS逻辑

核心是记录当前点击的td，并根据它的标识匹配对应的输入框：

// 获取所有可编辑的td
const editTds = document.querySelectorAll('td[data-field]');
// 获取输入框和保存按钮
const navnInput = document.getElementById('inpnavn');
const adresseInput = document.getElementById('inpadresse');
const saveBtn = document.getElementById('saveEdit');

// 用来存储当前被点击的目标td
let activeTd = null;

// 给每个td绑定点击事件
editTds.forEach(td => {
  td.addEventListener('click', (e) => {
    // 拿到当前点击的那个td元素
    activeTd = e.target;
    // 根据data-field属性填充对应输入框
    const fieldType = activeTd.dataset.field;
    if (fieldType === 'name') {
      navnInput.value = activeTd.textContent;
    } else if (fieldType === 'address') {
      adresseInput.value = activeTd.textContent;
    }
  });
});

// 点击保存时修改选中的td
saveBtn.addEventListener('click', () => {
  if (!activeTd) return; // 没选中td就不执行修改
  const fieldType = activeTd.dataset.field;
  if (fieldType === 'name') {
    activeTd.textContent = navnInput.value.trim();
  } else if (fieldType === 'address') {
    activeTd.textContent = adresseInput.value.trim();
  }
  // 清空输入框和选中状态
  navnInput.value = '';
  adresseInput.value = '';
  activeTd = null;
});

为什么这样能解决问题？ #

• 用event.target准确获取当前被点击的td，而不是一开始就固定死第一个元素
• 通过data-field属性区分不同字段，确保输入框内容对应修改到正确的里
• 用activeTd变量记录当前要修改的目标，避免每次点击都搞错对象

内容的提问来源于stack exchange，提问作者Raahim Khan