JavaScript求和异常：行总价累加时出现字符串拼接而非数值相加

嘿，我一眼就看出问题所在了——你现在的代码在汇总总价时把数值当成字符串拼接了，这是因为DOM输入框的value属性默认是字符串类型，直接用+=就会触发字符串拼接逻辑，而不是数学加法。

问题根源 #

看你total函数的最后一行：

document.getElementById("total").value += total;

这里document.getElementById("total").value一开始是空字符串（或者字符串形式的数字），当你把total（就算你计算时转成了浮点数，赋值给input的value后又变回字符串了）加进去时，就会变成字符串拼接，比如第一次是"150"，第二次加200就变成"150200"，而不是你想要的350。

解决方案 #

正确的做法是每次修改行内数值时，重新计算所有行的total_price总和，而不是在原有总价值上累加。这样既解决了字符串拼接的问题，也能保证总和的准确性（比如用户修改某一行的数值时，之前的累加逻辑会出错，重新计算所有行就不会）。

修改后的JavaScript代码如下：

function total(element) {
    // 计算当前行的总价
    const row = element.closest("tr");
    // 把每个输入值转成浮点数，空值/非数字按0处理
    const unitRate = parseFloat(row.querySelector("input[name=p_cost]").value) || 0;
    const qty = parseFloat(row.querySelector("input[name=quantity]").value) || 0;
    const sale = parseFloat(row.querySelector("input[name=sale]").value) || 0;
    const totalPrice = (unitRate * qty) + sale;
    
    // 赋值给当前行的total_price输入框，保留两位小数适配金额场景
    row.querySelector("input[name=total_price]").value = totalPrice.toFixed(2);
    
    // 重新计算所有行的总合计
    calculateGrandTotal();
}

function calculateGrandTotal() {
    let grandTotal = 0;
    // 获取所有行的total_price输入框
    const totalPriceInputs = document.querySelectorAll("input[name=total_price]");
    
    totalPriceInputs.forEach(input => {
        // 累加每个输入框的数值，空值按0处理
        grandTotal += parseFloat(input.value) || 0;
    });
    
    // 赋值给总合计框，同样保留两位小数
    document.getElementById("total").value = grandTotal.toFixed(2);
}

额外优化建议 #

你的PHP循环里生成的所有行都用了重复的id（比如item_code、quantity），这违反了HTML规范（id必须唯一），可能会导致后续DOM选择出错。建议去掉这些重复的id属性（你已经在用name属性选择元素，id在这里没用），比如把PHP里的input改成：

<input type="number" name="item_code" class="form-control" value="<?php echo($row['item_code']); ?>" readonly />

这样修改后，不仅能解决字符串拼接的问题，代码逻辑也更健壮，还符合HTML规范。

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