如何实现表格每行删除按钮精准删除对应行（解决行号变动问题）

现有一个带“Add row”按钮的表格，点击该按钮可向表格中添加新行，每行包含一个“Delete This Row”按钮，按钮id按行号命名（如第一行按钮id为deleteRow1）。当前点击删除按钮本应删除对应行，但删除行后表格行数变化，导致删除按钮有时无法定位到正确行。请问需为删除函数添加何种逻辑，才能确保每次都精准删除对应行？

原代码 #

JS代码 #

var addBtn = document.getElementById("btn");
addBtn.onclick = addToTable;

function addToTable() {
  var webdevtable = document.getElementById("webdevtable");
  var webdevrow = webdevtable.insertRow(-1);
  var webdevcell1 = webdevrow.insertCell(0);
  var webdevcell2 = webdevrow.insertCell(1);

  var webdevRowNum = webdevtable.rows.length - 1;
  webdevcell1.innerHTML = webdevRowNum;
  webdevcell2.innerHTML = "<button id='deleteRow" + webdevRowNum + "'>Delete This Row</button>";

  var delbtnid = "deleteRow" + webdevRowNum;
  var delbtn = document.getElementById(delbtnid);

  delbtn.onclick = function() {
    webdevtable.deleteRow(webdevRowNum);
  }
}

HTML代码 #

<button id="btn">Add row</button>

<table id="webdevtable">
  <tr>
    <th>Row No.</th>
  </tr>
</table>

问题根源 #

当前代码里，删除按钮的点击事件绑定的是创建行时记录的webdevRowNum——这是一个固定数值。当删除某一行后，后续行的实际索引会自动前移，但之前绑定的事件里的行号还是创建时的旧值，导致删除时找错目标行。

解决方法 #

不需要依赖固定行号，而是通过删除按钮的DOM层级关系直接定位到它所在的行，再执行删除操作。推荐两种实现方式：

方式一：通过DOM元素关联定位行 #

修改删除按钮的点击事件，利用this（当前点击的按钮）向上遍历找到所在的<tr>元素，直接删除该行。还可以额外添加行号更新逻辑，保证显示的序号和实际行位置一致：

var addBtn = document.getElementById("btn");
addBtn.onclick = addToTable;

function addToTable() {
  var webdevtable = document.getElementById("webdevtable");
  var webdevrow = webdevtable.insertRow(-1);
  var webdevcell1 = webdevrow.insertCell(0);
  var webdevcell2 = webdevrow.insertCell(1);

  var webdevRowNum = webdevtable.rows.length - 1;
  webdevcell1.innerHTML = webdevRowNum;
  webdevcell2.innerHTML = "<button id='deleteRow" + webdevRowNum + "'>Delete This Row</button>";

  var delbtnid = "deleteRow" + webdevRowNum;
  var delbtn = document.getElementById(delbtnid);

  delbtn.onclick = function() {
    // 找到按钮所在的行
    var targetRow = this.closest('tr');
    targetRow.remove();
    // 删除后更新所有行的序号
    updateRowNumbers(webdevtable);
  }
}

// 更新行号的辅助函数
function updateRowNumbers(table) {
  // 跳过表头，从第二行开始遍历
  for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].cells[0].innerHTML = i;
  }
}

方式二：直接创建按钮DOM元素（更简洁） #

不通过innerHTML生成按钮，而是直接创建按钮DOM节点，绑定事件时直接关联当前创建的行，避免ID查找的冗余步骤：

var addBtn = document.getElementById("btn");
addBtn.onclick = addToTable;

function addToTable() {
  var webdevtable = document.getElementById("webdevtable");
  var webdevrow = webdevtable.insertRow(-1);
  var webdevcell1 = webdevrow.insertCell(0);
  var webdevcell2 = webdevrow.insertCell(1);

  var webdevRowNum = webdevtable.rows.length - 1;
  webdevcell1.innerHTML = webdevRowNum;

  // 直接创建按钮元素
  var delBtn = document.createElement('button');
  delBtn.id = 'deleteRow' + webdevRowNum;
  delBtn.textContent = 'Delete This Row';
  // 绑定事件时直接使用当前行
  delBtn.onclick = function() {
    webdevrow.remove();
    // 更新行号
    updateRowNumbers(webdevtable);
  };
  webdevcell2.appendChild(delBtn);
}

// 更新行号的辅助函数
function updateRowNumbers(table) {
  for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].cells[0].innerHTML = i;
  }
}

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