使用jQuery监听表格输入框变更，遍历行计算输入值问题

目标HTML表格示例 #

<table id="data-table">
  <thead>
    <tr>
      <th>数值1</th>
      <th>数值2</th>
      <th>数值3</th>
      <th>行总和</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="number" class="calc-input" value="0"></td>
      <td><input type="number" class="calc-input" value="0"></td>
      <td><input type="number" class="calc-input" value="0"></td>
      <td class="row-total">0</td>
    </tr>
    <tr>
      <td><input type="number" class="calc-input" value="0"></td>
      <td><input type="number" class="calc-input" value="0"></td>
      <td><input type="number" class="calc-input" value="0"></td>
      <td class="row-total">0</td>
    </tr>
  </tbody>
</table>
<p>全局总数值：<span id="global-total">0</span></p>

修正后的jQuery代码 #

$(document).ready(function() {
  // 监听表格内所有目标input的数值变更事件
  $('#data-table').on('input change', '.calc-input', function() {
    let globalTotal = 0;

    // 遍历表格的每一行，计算行内总和
    $('#data-table tbody tr').each(function() {
      let rowTotal = 0;
      // 汇总当前行所有input的数值
      $(this).find('.calc-input').each(function() {
        // 处理空值/非数字的情况，默认按0计算
        const inputValue = parseFloat($(this).val()) || 0;
        rowTotal += inputValue;
      });
      // 更新当前行的总和显示
      $(this).find('.row-total').text(rowTotal.toFixed(2));
      // 累加行总和到全局总数
      globalTotal += rowTotal;
    });

    // 更新全局总数值显示
    $('#global-total').text(globalTotal.toFixed(2));
  });
});

关键优化点说明 #

• 同时监听input和change事件：既支持用户实时输入时的动态计算，也覆盖了通过下拉选择（如果是number类型的input带步进器）或粘贴值后的触发场景；
• 数值校验处理：用parseFloat()转换输入值，搭配|| 0避免空值、非数字内容导致的NaN错误；
• 精准选择元素：给需要计算的input统一加.calc-input类，避免误操作表格内其他无关的输入框；
• 灵活格式化：用toFixed(2)保留两位小数，不需要的话可以直接去掉这个方法，显示原始数值。

如果你只需要全局总和而不需要行内计算，可以简化代码，直接遍历所有.calc-input累加即可，核心逻辑是一致的～

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