如何使用JQuery实现表格行列求和及页面加载自动计算行总计

你的现有函数已经能在输入框值变化时计算单行总和，只需补充初始化逻辑，就能在页面加载时自动计算所有行的总计值。以下是修改后的实现：

修改后的JavaScript代码 #

function sum_row_qty(el) {
  if (el) {
    let rowTotal = 0;
    const parentRow = el.closest("tr");
    parentRow.querySelectorAll('.size_qty').forEach(input => {
      // 处理空值或非数字输入，避免出现NaN
      rowTotal += parseFloat(input.value) || 0;
    });
    parentRow.querySelector('.qty').value = rowTotal;
  } else {
    // 遍历所有表格行，初始化计算每行总和
    document.querySelectorAll("#tableRows tr").forEach(row => {
      let rowTotal = 0;
      row.querySelectorAll('.size_qty').forEach(input => {
        rowTotal += parseFloat(input.value) || 0;
      });
      row.querySelector('.qty').value = rowTotal;
    });
  }
}

// 页面加载完成后自动触发初始化计算
document.addEventListener('DOMContentLoaded', function() {
  sum_row_qty();
});

对应的HTML代码（无需修改，保持原结构即可） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="tableRows">
  <tr>
    <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this)"></td>
    <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" 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="2" onchange="sum_row_qty(this);"></td>
    <td><input class="size_qty" type="number" min="0" name="numberInputs" value="2" onchange="sum_row_qty(this);"></td>
    <td><input type="number" min="0" class="qty" name="numberInputs" value="" readonly="true"></td>
  </tr>
</tbody>
</table>

关键修改说明 #

• 补充了无参数调用时的逻辑：遍历所有表格行，逐行计算size_qty输入框的总和，填入对应行的qty输入框
• 增加了|| 0处理输入为空或非数字的情况，防止计算结果出现NaN
• 通过DOMContentLoaded事件监听页面加载完成，自动触发初始化计算

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