如何使用jQuery实现HTML表格总价自动计算？现有代码计算结果仅为0.00

问题原因&修复方案 #

你遇到的总价始终为0的问题核心是calculateSum函数的遍历逻辑错误，加上你存储小计金额的是带货币符号的普通单元格，没有正确提取数值，具体修改步骤如下：

步骤1：修改新增行时的配置 #

首先给每行的服务小计单元格增加一个统一的类名subtotal，方便后续统一选择计算，修改你JS中append的最后一行代码：

// 原代码
<td style="text-align:right;" name="txt" class="totalprice'+newid+'">₱' + $("#item_total").val() + '</td>
// 修改为
<td style="text-align:right;" name="txt" class="totalprice'+newid+' subtotal">₱' + $("#item_total").val() + '</td>

同时把移除按钮的重复id修改为类（避免添加多行后移除功能异常）：

// 原代码
<td style="text-align:center;"><a class="btn btn-primary" href="javascript:void(0);" id="remove">Remove</a></td>
// 修改为
<td style="text-align:center;"><a class="btn btn-primary remove-btn" href="javascript:void(0);">Remove</a></td>

对应的移除事件监听也同步修改：

// 原代码
$("#transactions").on('click', '#remove', function() {
// 修改为
$("#transactions").on('click', '.remove-btn', function() {

步骤2：重写calculateSum计算逻辑 #

function calculateSum() {
    var sum = 0;
    // 遍历所有服务项的小计单元格
    $(".subtotal").each(function () {
        // 去掉金额前的₱符号，清洗成可计算的数值
        var price = $(this).text().replace('₱', '').trim();
        if (!isNaN(price) && price !== '') {
            sum += parseFloat(price);
        }
    });
    $("#grand_total").val(sum.toFixed(2));
}

可选优化：实付与找零自动计算 #

如果需要实现输入实付金额后自动计算找零，可以额外添加这段代码：

$('input[name=cashtendered]').on('input', function() {
    var total = parseFloat($('#grand_total').val()) || 0;
    var cash = parseFloat($(this).val()) || 0;
    var change = cash - total;
    $('input[name=change]').val(change >= 0 ? change.toFixed(2) : '');
});

内容的提问来源于stack exchange，提问作者Angelique Ann Yadao