如何让JavaScript计算函数作用于表格所有行完成金额计算

• HTML规范要求页面中id属性必须唯一，你给5行订单的单价、数量、单行小计输入框都设置了相同的id，document.getElementById()只会匹配到页面中第一个对应id的元素，所以永远只有第一行能被读取和计算。
• 原函数只写了单次取值计算的逻辑，没有遍历所有订单行，也没有累加所有行金额得到总金额的逻辑。
• 额外结构问题：<form>标签直接嵌套在<table>下包裹<tr>不符合HTML语法规范，浏览器渲染时会自动把form标签挪到表格外部，容易引发元素关联异常。

1. 调整HTML结构 #

• 删除所有行重复的id="PPRICE"/id="QTY"/id="TOTAL"属性，给对应输入框加类名做标识：单价输入框加pprice类、数量输入框加qty类、单行小计输入框加line-total类。
• 给底部总金额输入框设置唯一idgrandTotal方便后续赋值。
• 把<form>标签移动到表格外层，包裹整个表格；删掉form标签上多余的onclick="calculateTotal()"属性，仅保留计算按钮上的点击触发事件即可。

核心修正后的HTML片段参考：

<form action="#">
    <table>
        <tr class="row">
            <td><b>No.</b></td>
            <td><b>Book Title</b></td>
            <td><b>Author</b></td>
            <td><b>Category</b></td>
            <td><b>Unit Price</b></td>
            <td><b>Quantity</b></td>
            <td><b>Total</b></td>
        </tr>
        <!-- 5行订单行结构一致，以下为第一行示例，其余4行仅序号不同即可 -->
        <tr class="row1">
            <td>1</td>
            <td><input type="text"></td>
            <td><input type="text"></td>
            <td>
                <select>
                    <option disabled selected>Please choose the category...</option>
                    <option value="Business">Business</option>
                    <option value="Fiction">Fiction</option>
                    <option value="Mathematics">Mathematics</option>
                    <option value="Technology">Technology</option>
                </select>
            </td>
            <td><input type="number" value="0.00" min="0" step="any" class="pprice"></td>
            <td><input type="number" value="0" min="0" class="qty"></td>
            <td><input class="price line-total" value="0.00" disabled></td>
        </tr>
        <!-- 其余2-5行订单行和上面结构完全一致，不需要加id -->
        <tr class="row2">
            <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()"></td>
            <td colspan="2"><input class="totalprice" id="grandTotal" value="0.00" disabled></td>
        </tr>
    </table>
</form>

原CSS代码不需要做任何修改，可以直接保留使用。

2. 重写计算函数 #

替换原有script标签中的calculateTotal()函数，新逻辑会遍历所有订单行逐行计算小计，再累加得到总金额：

function calculateTotal(){
    // 初始化总金额为0
    let grandTotal = 0;
    // 获取所有订单行
    const allOrderRows = document.querySelectorAll('.row1');
    // 逐行遍历计算
    allOrderRows.forEach(row => {
        // 读取当前行的单价、数量，非法值/空值默认按0计算
        const unitPrice = Number(row.querySelector('.pprice').value) || 0;
        const quantity = Number(row.querySelector('.qty').value) || 0;
        // 计算单行小计
        const lineTotal = unitPrice * quantity;
        // 写入当前行的小计框，保留两位小数
        row.querySelector('.line-total').value = lineTotal.toFixed(2);
        // 累加到总金额
        grandTotal += lineTotal;
    });
    // 写入最终总金额，保留两位小数
    document.getElementById('grandTotal').value = grandTotal.toFixed(2);
}

• 代码中加入了空值/非法值容错，就算输入框留空或者填入非数字内容，也不会出现NaN的计算异常。
• 用toFixed(2)统一格式化金额为两位小数，符合日常金额显示习惯。
• 完全基于类选择器做元素匹配，后续新增订单行只要加row1类、内部输入框保留对应类名，不需要修改JS逻辑就能自动适配计算。

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