使用JavaScript/HTML监听表格变动 实现单价数量修改后总价自动更新

第一步：调整HTML触发事件 #

原有代码中onchange="update()"没有传递当前元素参数，无法定位到对应行的其他字段，需要修改数量、单价两个输入框的onchange属性：
把数量输入框的onchange="update()"修改为onchange="update(this)"，单价输入框的onchange属性也做同样修改。
注意：你现有代码中循环生成的input使用了重复的id（比如productCount、normalPrice等），id在单页面中必须唯一，后续建议直接使用class定位，不要依赖重复id

第二步：编写JavaScript计算逻辑 #

function update(currentInput) {
    // 定位到当前输入框所在的行元素
    const currentRow = currentInput.closest('tr');
    // 获取当前行的数量、单价值，转为数字格式，非法输入默认设为0
    const count = parseFloat(currentRow.querySelector('.count').value) || 0;
    const price = parseFloat(currentRow.querySelector('.price').value) || 0;
    // 计算总价，默认保留2位小数，符合金额展示规范
    const totalPrice = (count * price).toFixed(2);
    // 更新总价输入框的提交值
    currentRow.querySelector('input[name="totalPriceList"]').value = totalPrice;
    // 同步更新单元格的展示文本
    currentRow.querySelector('#totalPric').textContent = totalPrice;
}

可选优化 #

• 如果需要输入过程中实时更新（不需要失去焦点才触发计算），可以把onchange替换为oninput
• 可以给数量、单价输入框加上type="number"属性，限制用户只能输入数字，减少非法值判断成本

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