删除HTML表格中间行后如何更新剩余行的ID与Name属性

我懂你遇到的问题了——删掉表格中间的行之后，剩下的那些输入框的id、name还有标签的for属性还停留在原来的序号，没有重新从0开始排序，对吧？这不仅会让序号逻辑混乱，还可能导致标签和输入框的关联失效，咱们来一步步搞定这个问题。

问题根源 #

你原来的代码在添加行时是根据当时表格的行数生成序号的，但删除行后没有遍历剩余行更新序号，所以剩下的行还保留着删除前的编号，自然就和实际的行位置对不上了。

解决方案：新增重新编号函数 + 修改删除逻辑 #

核心思路是：删除行完成后，遍历所有剩余行，把每一行里的输入框、标签的id、name、for属性全部重新按当前行的索引（从0开始）编号。

步骤1：编写重新编号的工具函数

这个函数会遍历表格tbody里的每一行，找到所有需要更新的表单元素，替换它们的编号部分：

function renumberRows() {
  const tblBody = document.querySelector('#table1 tbody');
  const rows = tblBody.querySelectorAll('tr');

  // 遍历每一行，index就是当前行的新序号（从0开始）
  rows.forEach((row, index) => {
    // 处理EVAL 1对应的checkbox和label
    const eval1Cb = row.querySelector('input[id^="eval_cb0_"]');
    const eval1Label = row.querySelector('label[for^="eval_cb0_"]');
    if (eval1Cb) {
      eval1Cb.id = `eval_cb0_${index}`;
      eval1Cb.name = `eval_cb0_${index}`;
    }
    if (eval1Label) {
      eval1Label.setAttribute('for', `eval_cb0_${index}`);
    }

    // 处理EVAL 2对应的checkbox和label
    const eval2Cb = row.querySelector('input[id^="eval_cb1_"]');
    const eval2Label = row.querySelector('label[for^="eval_cb1_"]');
    if (eval2Cb) {
      eval2Cb.id = `eval_cb1_${index}`;
      eval2Cb.name = `eval_cb1_${index}`;
    }
    if (eval2Label) {
      eval2Label.setAttribute('for', `eval_cb1_${index}`);
    }
  });
}

步骤2：修改删除函数，完成删除后调用重新编号

在deleteRow函数的最后，所有选中的行删除完成后，调用上面的renumberRows()函数：

function deleteRow() {
  const checkboxes = document.querySelectorAll(".row-cb");

  const userConfirm = confirm("Are u sure?");
  if (!userConfirm) return;

  checkboxes.forEach((checkbox) => {
    if (checkbox.checked) {
      const row = checkbox.closest('tr');
      row.remove();
    }
  });

  // 关键：删除后立即重新给所有行编号
  renumberRows();
}

步骤3：优化添加行的序号生成（可选但更简洁）

原来的addRow函数里，const lastRow那一行其实可以去掉，直接用tblBody.rows.length作为新行的序号就足够了，因为插入前的行数就是当前的最大序号+1（从0开始的话，第1行序号0，第2行1，以此类推），优化后的addRow函数：

function addRow() {
  var tblList = document.getElementById("table1");
  var tblBody = tblList.tBodies[0];
  const length = tblBody.rows.length;

  try {
    var row = tblBody.insertRow(length);
  } catch (e) {
    console.log(e);
    return false;
  }

  var newCell0 = row.insertCell(0);
  newCell0.innerHTML = `
        <table style="width: 100%;">
            <tr>
                <td>
                    <input type="checkbox" id="eval_cb0_${length}" name="eval_cb0_${length}" value="checked" >
                </td>
                <td>
                    <label for="eval_cb0_${length}">EVAL 1</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="eval_cb1_${length}" name="eval_cb1_${length}" value="checked" >
                </td>
                <td>
                    <label for="eval_cb1_${length}">EVAL 2</label>
                </td>
            </tr>
        </table>
        `;

  var newCell1 = row.insertCell(1);
  newCell1.innerHTML = `
            <input class="row-cb" type="checkbox" name="cb_clone[]">
        `;
}

完整测试场景 #

1. 点击ADD按钮3次，生成3行，序号分别为0、1、2
2. 选中第2行（序号1）的删除checkbox，点击DELETE确认删除
3. 此时剩下的两行会被自动重新编号为0和1，所有表单元素的id、name、for属性都会同步更新

这样就彻底解决了删除行后序号混乱的问题啦！

备注：内容来源于stack exchange，提问作者purple hippo