JS实现发票表格修改商品名、调整数字输入框值后总金额计算错误如何解决？

问题根因与修改方案 #

问题1：修改选中商品后总金额未更新 #

• 根因：商品下拉框的onchange回调myItemPrice()仅更新了单价字段，未触发总金额重计算逻辑。
• 修复：修改myItemPrice函数，单价更新后主动调用multiply()：

function myItemPrice(){
       var price = $('#selected_item').find(':selected').data('price');
       $('#getprice').val(price);
       multiply(); // 新增该行
}

问题2：点击number输入框上下箭头总金额不刷新 #

• 根因：仅给数量输入框绑定了onKeyUp事件，该事件仅在键盘输入时触发，点击浏览器自带的数值调整按钮会触发input和change事件，未绑定这两个事件就不会执行计算。
• 修复：修改第一行数量输入框的事件绑定：

<!-- 原代码 -->
<!-- <input type="number" id="qty" onKeyUp="multiply()" input-number> -->
<!-- 修改后 -->
<input type="number" id="qty" oninput="multiply()" onchange="multiply()" input-number>

补充：动态新增行适配方案 #

你当前代码中动态新增的行缺少ID标识和事件绑定，后续使用也会出现计算问题，可按如下逻辑修改：

1. 修改addRow函数中新增行的数量、总金额字段代码，添加ID和事件绑定：

// 原代码
// html +='<td ><input type="number" ></td>';
// html +='<td ><input type="number" ></td>';
// 修改后
html +='<td ><input type="number" id="qty_'+i+'" oninput="multiplyRow('+i+')" onchange="multiplyRow('+i+')" ></td>';
html +='<td ><input type="number" id="total_'+i+'" readonly></td>';

2. 修改myItemPrices函数，新增单价更新后重算逻辑：

function myItemPrices(var1){
 i=var1;
 var prices = $('#selected_items'+i).find(':selected').data('prices');
 $('#getprices'+i).val(prices); 
 multiplyRow(i); // 新增该行
}  

3. 新增行对应的总金额计算函数：

function multiplyRow(rowIndex) {
  const qty = Number(document.getElementById('qty_'+rowIndex).value);
  const price = Number(document.getElementById('getprices'+rowIndex).value);
  document.getElementById('total_'+rowIndex).value = qty * price;
}

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