遍历HTML表格实现JS自动计算每行总价，添加循环后功能失效排查

现有代码存在的问题 #

• HTML使用了重复ID：ID属性在单页文档中必须唯一，你给所有行的单价、数量输入框、总价输出元素都设置了相同ID，导致原生选择器只会匹配到第一个出现的对应元素
• JS元素选择逻辑错误：getElementsByClassName返回的是元素集合，无法直接绑定事件；且你全局查询元素，没有限定在当前遍历的表格行内，无法匹配到当前行对应的三个元素
• 未跳过表头行：表格第一行是表头，没有对应的输入输出元素，遍历时会触发节点不存在的报错
• 使用非标准属性：p标签的value属性不属于HTML标准属性，建议替换为data-前缀的自定义属性，符合规范也更易维护

修改后的HTML代码 #

<table class="u-table-entity" id="table_gebäck">
  <script src="calculation.js"></script>
  <colgroup>
    <col width="20%">
    <col width="2.1%">
    <col width="22%">
    <col width="21.7%">
    <col width="34.2%">
  </colgroup>
  <tbody class="u-table-alt-grey-5 u-table-body">
    <tr style="height: 55px;">
      <b>
      <td class="u-table-cell u-table-cell-1"><b>Produkt</b><span style="font-weight: 700;"></span>
      </td>
      <td class="u-table-cell"></td>
      <td class="u-table-cell u-table-cell-3"><b>Einzelpreis</b></td>
      <td class="u-table-cell u-table-cell-4"><b>Menge</b></td>
      <td class="u-table-cell u-table-cell-5"><b>Gesamtpreis</b></td>
      </b>
    </tr>
    <tr style="height: 55px;">
      <td class="u-table-cell">Kornspitz</td>
      <td class="u-table-cell"></td>
      <td class="u-table-cell">
        <p data-price="1.39" class="basePrice">1,39 €</p>
      </td>
      <td class="u-table-cell">
        <form>
          <input type="number" min="0" class="quantity" value="0" step="1.0">
        </form>
      </td>
      <td class="u-table-cell">
        <form>
          <p><output class="field_sum" for="quantity">0</output> €</p>
        </form>
      </td>
    </tr>
    <tr style="height: 55px;">
      <td class="u-table-cell">Row 2</td>
      <td class="u-table-cell"></td>
      <td class="u-table-cell">
        <p data-price="5.39" class="basePrice">5,39 €</p>
      </td>
      <td class="u-table-cell">
        <form>
          <input type="number" min="0" class="quantity" value="0" step="1.0">
        </form>
      </td>
      <td class="u-table-cell">
        <form>
          <p><output class="field_sum" for="quantity">0</output> €</p>
        </form>
      </td>
    </tr>
  </tbody>
</table>

注：删除了重复的id属性，替换为class属性；将原非标准的value属性改为data-price自定义属性；删除了重复的form表单id属性

修改后的JavaScript代码 #

const table = document.getElementById("table_gebäck");
// 从索引1开始遍历，跳过表头行
for (let i = 1; i < table.rows.length; i++) {
  const currentRow = table.rows[i];
  // 限定在当前行内查找对应元素，避免全局匹配冲突
  const basePriceEl = currentRow.querySelector(".basePrice");
  const quantityInput = currentRow.querySelector(".quantity");
  const sumOutput = currentRow.querySelector(".field_sum");

  quantityInput.addEventListener("change", () => {
    // 读取单价自定义属性值，转为数字
    const basePrice = parseFloat(basePriceEl.dataset.price);
    // 读取输入数量，空值默认按0计算
    const quantity = parseFloat(quantityInput.value) || 0;
    // 计算总价保留两位小数
    const totalPrice = (basePrice * quantity).toFixed(2);
    sumOutput.textContent = totalPrice;
  });
}

注：修改后代码无需刷新页面，每行输入数量变化时会自动计算当前行总价，新增表格行只需保持class结构一致即可自动适配逻辑

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