jQuery根据数量/单价计算行合计及最终总价时总价不更新问题求解

问题原因 #

• 循环遍历行合计时选择器使用错误，未获取当前遍历行的合计值，而是错误获取所有行合计的拼接文本
• 未将获取到的合计文本转为数值类型，直接相加会触发字符串拼接逻辑，无法得到正确的数值总和
• 选择器#tblUpdate.UnitTotal缺少空格，无法正确匹配目标元素
• 原代码将ChangePrice函数定义在$(document).ready闭包内，HTML内联的onchange事件在全局作用域下无法访问到该函数

修正后的完整代码 #

JS部分 #

// 函数移至全局作用域，保证内联onchange事件可以正常调用
function ChangePrice(LineID,FieldChanged) {
    const Quantity = document.getElementById("Quantity"+LineID);
    const UnitPrice = document.getElementById("UnitPrice"+LineID);
    // 转数值，非法值默认归0避免计算错误
    const vQuantity = parseFloat(Quantity.value) || 0;
    const vUnitPrice = parseFloat(UnitPrice.value) || 0;

    if (FieldChanged == "Quantity" || FieldChanged == "UnitPrice") {
        const vCustomTotal = vQuantity * vUnitPrice;
        $('#UnitTotal' + LineID).text(vCustomTotal.toFixed(2));
    }
    refreshTotals();
}

function refreshTotals() {
    let vTotalPrice = 0;
    $('.UnitTotal').each(function() {
        // 取当前遍历行的合计值，转数值后累加
        const rowTotal = parseFloat($(this).text()) || 0;
        vTotalPrice += rowTotal;
    });
    $('#TotalPrice_Total').text(vTotalPrice.toFixed(2));
}

$(document).ready(function() {
    // 页面加载完成后初始化一次总价，和后端渲染的数值同步
    refreshTotals();
});

可选优化方案（无需修改HTML结构） #

可以移除HTML输入框的内联onchange属性，改用jQuery事件绑定，减少全局函数污染：

$(document).ready(function() {
    // 统一绑定数量、单价修改事件
    $('.Quantity, .Price').on('change', function() {
        const $tr = $(this).closest('tr');
        const vQuantity = parseFloat($tr.find('.Quantity').val()) || 0;
        const vUnitPrice = parseFloat($tr.find('.Price').val()) || 0;
        $tr.find('.UnitTotal').text((vQuantity * vUnitPrice).toFixed(2));
        refreshTotals();
    });

    function refreshTotals() {
        let vTotalPrice = 0;
        $('.UnitTotal').each(function() {
            vTotalPrice += parseFloat($(this).text()) || 0;
        });
        $('#TotalPrice_Total').text(vTotalPrice.toFixed(2));
    }

    // 初始化总价
    refreshTotals();
});

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