如何使用jQuery计算表格中所有行的数字总和？

当前代码可点击按钮添加字母和数字行，但无法正确计算表格内所有数字的总和，以下是修正后的实现方案：

原代码存在的问题 #

• 表格行追加时HTML标签未闭合（<tr>和第二个<td>均未写闭合标签），会导致DOM结构异常
• 总和计算逻辑错误：parseInt($("td.table-number").html())仅能获取第一个.table-number元素的值，且+=的写法不符合赋值逻辑，无法实现所有数字的累加

修正后的完整代码 #

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button#add").click(function(){
    // 修复HTML标签闭合问题，正确追加完整表格行
    $("table#content-table").append('<tr><td class="table-letter">' + $("#letter").val() + '</td><td class="table-number">' + $("#number").val() + '</td></tr>');
    
    // 计算所有数字的总和
    let total = 0;
    $(".table-number").each(function(){
      // 处理空值或非数字情况，默认取0
      total += parseInt($(this).text() || 0);
    });
    // 更新总和显示
    $("td.table-total").text(total);

    // 清空输入框，提升用户体验
    $("#letter").val('');
    $("#number").val('');
  });

  // 页面加载时先计算初始总和
  let initialTotal = 0;
  $(".table-number").each(function(){
    initialTotal += parseInt($(this).text() || 0);
  });
  $("td.table-total").text(initialTotal);
});
</script>
</head>
<body>

<table id="content-table">
 <tr>
  <th>Letter</th>
  <th>Number</th>
 </tr>
 <tr>
  <td class="table-letter">A</td>
  <td class="table-number">5</td>
 </tr>
</table>
<table>
 <tr>
  <td>Total</td>
  <td class="table-total"></td>
 </tr>
</table>

<form action="javascript:void(0);">
 <input id="letter" name="letter" placeholder="Enter letter" required />
 <input type="number" id="number" name="number" placeholder="Enter number" required />
 <button id="add">ADD</button>
</form>

</body>
</html>

关键改动说明 #

• 修复DOM结构：追加表格行时补全<td>和<tr>的闭合标签，确保DOM结构正确
• 正确的总和计算逻辑：使用.each()遍历所有.table-number元素，逐个累加数值，同时处理可能的空值或非数字场景
• 初始化总和：页面加载完成后自动计算初始表格的数字总和，避免初始状态下总和为空
• 优化用户体验：添加输入框清空逻辑，方便连续添加数据

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