输入框值变更时列求和失效，出现TypeError错误求助

错误根源 #

你遇到的Uncaught TypeError主要来自两个核心问题：

1. 总计行DOM获取错误：总计行的单元格不在id="tableRows"的tbody内，而是在另一个独立tbody中，导致tableBody.getElementsByClassName('column-total-row')[0]返回undefined，调用getElementsByTagName时触发报错。
2. 列索引不匹配：HTML中input的onchange传入的是1/2/3，但DOM元素索引从0开始，访问不存在的<td>后，后续方法调用因cell为undefined报错。

修复后的完整代码 #

HTML部分 #

<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:4%">L</th>
      <th style="width:4%">XL</th>
      <th style="width:4%">2XL</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="50"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="50"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="25"></td>
    </tr>
    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="40"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="15"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="5"></td>
    </tr>
  </tbody>
  <tbody>
    <!-- 给总计行添加类，方便精准获取 -->
    <tr class="total-row">
      <td align="middle"><strong>90.00</strong></td>
      <td align="middle"><strong>65.00</strong></td>
      <td align="middle"><strong>30.00</strong></td>
      <td class="total_title" align="middle"></td>
      <td id="totalValue" class="total"><strong></strong></td>
    </tr>
  </tbody>
</table>

JavaScript部分 #

function updateColumnTotals(colIndex) {
  const tableBody = document.getElementById('tableRows');
  const rows = tableBody.getElementsByTagName('tr');
  let total = 0;

  for (let i = 0; i < rows.length; i++) {
    const row = rows[i];
    // 先判断单元格是否存在，避免索引越界报错
    const cell = row.getElementsByTagName('td')[colIndex];
    if (!cell) continue;
    
    const input = cell.querySelector('.size_qty');
    if (input) {
      const value = parseFloat(input.value) || 0;
      total += value;
    }
  }

  // 从整个表格中获取总计行，而非限定在tableRows的tbody内
  const totalRow = document.querySelector('#dtable .total-row');
  if (!totalRow) return;
  
  const totalCell = totalRow.getElementsByTagName('td')[colIndex];
  if (totalCell) {
    totalCell.innerHTML = `<strong>${total.toFixed(2)}</strong>`;
  }
}

document.addEventListener("DOMContentLoaded", function() {
  const sizeQtyInputs = document.querySelectorAll(".size_qty");
  sizeQtyInputs.forEach((input) => {
    input.addEventListener("change", function() {
      // 动态获取正确的0起始列索引
      const colIndex = Array.from(input.parentNode.parentNode.cells).indexOf(input.parentNode);
      updateColumnTotals(colIndex);
    });
  });
});

关键修复点 #

• 移除HTML中input硬编码的onchange事件，避免和JS监听冲突，同时确保使用动态获取的0起始索引。
• 调整总计行获取逻辑：从整个表格#dtable中查找.total-row，而非从tableRows的tbody中查找。
• 新增多处空值判断，避免因DOM元素不存在导致的报错。
• 统一使用0起始的列索引，符合DOM元素的索引规范。

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