HTML表格加载时字段未自动计算？如何确保函数执行行总和计算

问题原因分析 #

1. 页面加载时不自动计算的原因：当前代码仅通过输入框的onchange事件触发sum_row_qty函数，页面加载完成后没有主动调用该函数，因此加载阶段不会执行任何行总和计算逻辑。
2. else分支未运行的原因：sum_row_qty的else分支仅在传入的el参数为undefined时才会执行，但目前没有任何代码在页面加载时以无参数的方式调用该函数，所以else分支从未被触发。

修复方案 #

1. 修复函数逻辑缺陷 #

当前函数中if (rowTotal)的判断会忽略总和为0的情况（因为0在布尔判断中为false），导致总和为0时不会更新到total输入框。同时添加|| 0避免输入值为空时出现NaN，修改后的函数如下：

function sum_row_qty(el, poOrigin) {
  let rowTotal = 0
  if (el) {
    let parent = el.closest("tr")
    parent.querySelectorAll('.size_qty').forEach(function(e) {
        rowTotal += parseFloat(e.value) || 0;
    })
    // 无论总和是多少都赋值，包括0的情况
    parent.querySelector('.qty').value = rowTotal;
  } else {
    // 遍历所有行的第一个size_qty输入框，触发行计算
    document.querySelectorAll("#tableRows > tr > td:first-child input.size_qty").forEach(sum_row_qty);
  }
}

2. 页面加载时主动触发计算 #

在页面DOM加载完成后，无参数调用sum_row_qty()，触发else分支遍历所有行计算总和。可以通过DOMContentLoaded事件实现：

// 页面加载完成后自动计算所有行总和
document.addEventListener('DOMContentLoaded', function() {
  sum_row_qty();
});

完整修改后的代码 #

JavaScript

function sum_row_qty(el, poOrigin) {
  let rowTotal = 0
  if (el) {
    let parent = el.closest("tr")
    parent.querySelectorAll('.size_qty').forEach(function(e) {
        rowTotal += parseFloat(e.value) || 0;
    })
    parent.querySelector('.qty').value = rowTotal;
  } else {
    document.querySelectorAll("#tableRows > tr > td:first-child input.size_qty").forEach(sum_row_qty);
  }
}

// 页面加载完成后自动计算所有行总和
document.addEventListener('DOMContentLoaded', function() {
  sum_row_qty();
});

HTML

<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:4%; text-align: left">OS</th>
      <th style="width:4%">XS</th>
      <th style="width:4%">Total</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
    </tr>
    <tr>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="14" onchange="sum_row_qty(this);"></td>
      <td><input class="size_qty" type="number" min="0" name="numberInputs" value="0" onchange="sum_row_qty(this);"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
    </tr>
  </tbody>
</table>

关键说明 #

• 无参数调用sum_row_qty()时，el为undefined，进入else分支，遍历所有行的第一个size_qty输入框，逐个触发行计算逻辑。
• 添加|| 0处理输入框值为空的情况，避免parseFloat返回NaN导致总和异常。
• 去掉if(rowTotal)判断，确保总和为0时也能正确显示到total输入框。

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