如何使用jQuery计算表格指定列总和 解决借贷列及总金额计算异常

现存核心问题 #

• 遍历范围错误：原选择器$('table .acc_table .acc-row')仅匹配带acc-row类的行，当前DOM中仅第一行添加了该类，剩余3行数据完全未被纳入计算，求和基数就不符合预期。
• 取值逻辑错误：$tr.find('td')返回当前行所有单元格的集合，后续用.next('td')的方式无法精准定位Debit、Credit列的单元格，jQuery集合的.next()会返回集合内每个元素的下一个兄弟节点，最终取到的内容并非目标列的数值。
• 未定义变量报错：判断条件!isNaN(value)中的value从未声明定义，会直接触发ReferenceError，导致后续求和、赋值逻辑全部中断。
• 变量作用域错误：TotalAmount定义在.each()循环的回调函数内部，属于局部变量，循环执行结束后变量会被销毁，后续给#totalAmount赋值时无法识别该变量。

修正后可正常运行的代码 #

页面DOM（无需修改，保留原有结构即可） #

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Debit</th>
      <th>Credit</th>
      <th>Document No</th>
    </tr>
  </thead>
  <tbody class="acc_table">
    <tr>
      <td>1</td>
      <td>100</td>
      <td>0</td>
      <td>Testing 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>0</td>
      <td>100</td>
      <td>Testing 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>320</td>
      <td>0</td>
      <td>Testing 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>0</td>
      <td>250</td>
      <td>Testing 4</td>
    </tr>
  </tbody>
  <tfoot>
   <tr>
     <td>Total</td>
     <td><input type='text' id='totalDr' value='0.00' disabled></td>
     <td><input type='text' id='totalCr' value='0.00' disabled></td>
   </tr>
  </tfoot>
</table>
<br><br>
<input type='text' id='totalAmount' value='0.00' disabled>

修正后的jQuery逻辑 #

$(document).ready(function() {
  var total_cr = 0;
  var total_dr = 0;
  // 遍历acc_table下所有行，无需依赖acc-row类
  $('.acc_table tr').each(function() {
    var $tds = $(this).find('td');
    // 按列索引精准取值：第2列(索引1)为Debit，第3列(索引2)为Credit
    // 加||0兜底，避免空值/非数字导致的NaN
    var debitVal = parseInt($tds.eq(1).text()) || 0;
    var creditVal = parseInt($tds.eq(2).text()) || 0;
    total_dr += debitVal;
    total_cr += creditVal;
  });
  // 总金额定义在循环外部，避免作用域问题
  var TotalAmount = total_dr + total_cr;
  // 按预期格式赋值
  $("#totalDr").val(total_dr.toFixed(2));
  $("#totalCr").val(total_cr.toFixed(2));
  $("#totalAmount").val(TotalAmount.toFixed(2));
});

输出结果 #

运行修正后的代码，会得到符合预期的数值：

• 借方合计：420.00
• 贷方合计：350.00
• 两类金额总计：770.00

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