使用jQuery/DataTables实现表格余额列自动计算求助

方案一：使用原生jQuery实现 #

直接遍历表格行，逐行计算累计余额：

$(document).ready(function() {
    // 初始化累计余额为0
    let runningBalance = 0;
    // 遍历表格tbody中的每一行
    $('.s-table tbody tr').each(function() {
        // 获取当前行的借方金额，转为整数（非数字则取0）
        const debit = parseInt($(this).find('td:eq(0)').text()) || 0;
        // 获取当前行的贷方金额，转为整数（非数字则取0）
        const credit = parseInt($(this).find('td:eq(1)').text()) || 0;
        // 计算当前余额
        runningBalance += debit - credit;
        // 将余额写入当前行的balance列
        $(this).find('td:eq(2)').text(runningBalance);
    });
});

方案二：使用DataTables API实现 #

如果表格已通过DataTables初始化，可通过以下两种方式实现：

方法1：初始化后遍历计算 #

$(document).ready(function() {
    let runningBalance = 0;
    // 初始化DataTables，禁用余额列排序避免计算混乱
    const table = $('.s-table').DataTable({
        columnDefs: [{ targets: 2, orderable: false }]
    });
    
    // 遍历所有行计算余额
    table.rows().every(function() {
        const rowNode = this.node();
        const debit = parseInt($(rowNode).find('td:eq(0)').text()) || 0;
        const credit = parseInt($(rowNode).find('td:eq(1)').text()) || 0;
        runningBalance += debit - credit;
        $(rowNode).find('td:eq(2)').text(runningBalance);
    });
});

方法2：初始化时通过createdRow回调计算 #

$(document).ready(function() {
    let runningBalance = 0;
    $('.s-table').DataTable({
        createdRow: function(row, data, index) {
            // data为当前行数据数组，data[0]对应debit，data[1]对应credit
            const debit = parseInt(data[0]) || 0;
            const credit = parseInt(data[1]) || 0;
            runningBalance += debit - credit;
            $(row).find('td:eq(2)').text(runningBalance);
        },
        columnDefs: [{ targets: 2, orderable: false }]
    });
});

注意事项 #

• 代码中用|| 0处理非数字内容，避免计算出现NaN错误。
• 若启用DataTables排序功能，建议禁用余额列排序，防止排序后余额基于新行顺序重新计算，偏离业务逻辑。

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