为表格行添加删除按钮并实现序号刷新功能求助

实现删除行与序号刷新功能 #

要解决你的问题，需要完成两个核心操作：绑定删除按钮的点击事件以移除对应行，以及在删除后重新计算并更新所有行的序号。以下是具体实现步骤和完整代码：

1. 为删除按钮添加点击事件
   在HTML的删除按钮上添加onClick="deleteRow(this)"，通过this传递当前按钮元素，以此定位到要删除的表格行。

2. 编写删除行函数
   通过按钮元素找到其父级的表格行（tr），调用remove()方法删除该行；删除完成后调用序号刷新函数，确保剩余行的序号连续。

3. 编写序号刷新函数
   遍历表格中的所有行，将每行第一列输入框的value设置为当前行的索引+1（因为行索引从0开始），保证序号始终从1开始连续递增。

4. 优化添加行逻辑
   替换原有的手动递增序号逻辑为调用序号刷新函数，避免因中间行删除后添加新行导致序号混乱。

完整代码示例 #

JavaScript 代码

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  }
  // 添加新行后刷新序号
  refreshRowNumbers(tableID);
}

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  // 至少保留一行数据
  if (row.parentNode.rows.length > 1) {
    row.remove();
    // 删除后刷新序号
    refreshRowNumbers(row.parentNode.id);
  }
}

function refreshRowNumbers(tableID) {
  var table = document.getElementById(tableID);
  var rows = table.rows;
  for (var i = 0; i < rows.length; i++) {
    rows[i].cells[0].children[0].value = i + 1;
  }
}

HTML 代码

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>item1</th>
      <th>item2</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="dataTable" class="table">
    <tr>
      <td><input type="text" value="1" name="chk[]"></td>
      <td><input type="text" value="1" name="chk[]"></td>
      <td>
        <input type="button" value="add" onClick="addRow('dataTable')" /> | 
        <input type="button" value="delete" onClick="deleteRow(this)" />
      </td>
    </tr>
  </tbody>
</table>

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