使用JS按钮删除表格行后添加新行出现索引越界错误求助

错误原因 #

1. 插入行索引失效：你用全局变量row记录插入位置，但删除行后这个变量不会同步减少，导致后续插入新行时，传入的索引值远大于表格实际行数，触发索引越界错误。
2. 删除逻辑错误：deleteRow(-1)是固定删除表格最后一行，并非点击按钮对应的目标行，不符合需求。

修复步骤 #

1. 动态获取插入位置：不再依赖全局row变量，改用表格的rows.length属性获取当前总行数，直接在表格末尾插入新行（insertRow不传参数时默认插入到最后，也可显式传入display.rows.length）。
2. 精准删除目标行：通过事件对象找到点击按钮所在的<tr>元素，调用表格的deleteRow方法并传入该行的rowIndex，或者直接移除该行DOM元素。

修改后的完整代码 #

JavaScript

var entry = document.getElementById("entry");
entry.addEventListener("click", displayDetails);

function displayDetails() {
  var item = document.getElementById("item").value;
  var date = document.getElementById("date").value;
  var cost = document.getElementById("cost").value;

  if (!item || !date || !cost) {
    alert("Please fill in all the boxes!");
    return;
  }

  var display = document.getElementById("display");
  // 直接在表格末尾插入新行，无需依赖全局row变量
  var newRow = display.insertRow();

  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);

  cell1.textContent = item;
  cell2.textContent = date;
  cell3.textContent = cost;
  // 用createElement创建按钮，比innerHTML更安全
  var deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'X';
  cell4.appendChild(deleteBtn);

  // 绑定删除事件，精准定位当前行
  deleteBtn.addEventListener("click", (e) => {
    // 获取按钮所在的行元素
    const targetRow = e.target.closest('tr');
    // 通过表格的deleteRow方法删除，传入行的索引
    display.deleteRow(targetRow.rowIndex);
    // 或者直接移除DOM元素：targetRow.remove();
  });

  // 清空输入框，提升用户体验
  document.getElementById("item").value = '';
  document.getElementById("date").value = '';
  document.getElementById("cost").value = '';
}

HTML

<div class="formContainer">
  <label for="item">Item</label>
  <input type="text" name="item" placeholder="Item" id="item" />

  <label for="date">Date</label>
  <input type="date" name="date" id="date" />

  <label for="cost">Cost</label>
  <input type="text" name="cost" placeholder="cost" id="cost" />
</div>
<div class="buttonContainer">
  <button id="entry">Submit Expense</button>
  <button id="clear" onclick="window.location.reload()">Clear List</button>
</div>
<div class="tableContainer">
  <table id="display">
    <tr>
      <th>Item</th>
      <th>Date</th>
      <th>Cost</th>
      <th>Action</th> <!-- 新增表头列，对应删除按钮 -->
    </tr>
  </table>
</div>

额外优化说明 #

• 用textContent替代innerHTML设置单元格内容，避免潜在的XSS风险，更安全。
• 改用createElement创建删除按钮，比直接写innerHTML更符合DOM操作规范。
• 新增清空输入框的逻辑，提升用户操作体验。
• 在表格表头新增Action列，让布局更合理。

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