JavaScript多行表单循环计算仅第一行生效问题求助

问题根源 #

HTML的id属性要求全局唯一，你所有行的输入框都复用了相同的id，document.getElementById()只会匹配到第一个出现的对应id元素，所以只有第一行的计算会生效。 #

第一步：修改视图层代码 #

1. 给每一行的<tr>标签添加统一类名，比如class="calc-row"
2. 删除输入框的重复id，改用类名标记不同字段，同时把触发计算的onkeyup改为传当前元素：onkeyup="calc(this)"
   修改后的视图代码示例：

<!-- 每一行的tr结构 -->
<tr class="calc-row">
  <td><input class="form-control calc-rate" onkeyup="calc(this)" type="text" name="ui_rate[]" value="{{ $c->bm_eb_rate}}"></td>
  <td><input class="form-control calc-ob" type="text" name="ui_omr[]" value="{{ $c->bm_eb_ob}}"></td>
  <td><input class="form-control calc-cb" onkeyup="calc(this)" type="text" name="ui_cmr[]" value="{{ $c->bm_eb_cb}}"></td>
  <td><input class="form-control text-right calc-consumed" type="text" name="ui_consumed[]" readonly></td>
  <td><input class="form-control text-right calc-amount" type="text" name="ui_amount[]" readonly></td>
  <td><input class="form-control text-right calc-vat" type="text" name="ui_vat[]" readonly></td>
  <td><input class="form-control text-right calc-netamount" type="text" name="ui_netamount[]" readonly></td>
</tr>

第二步：修改JS计算逻辑 #

改为先定位当前触发输入所在的行，再只对当前行的字段做计算：

<script>
function calc(el) {
  // 找到当前输入框所在的行
  const row = el.closest('.calc-row');
  // 取值同时转成数字，空值默认0避免计算异常
  const eb_rate = parseFloat(row.querySelector('.calc-rate').value) || 0;
  const eb_ob = parseFloat(row.querySelector('.calc-ob').value) || 0;
  const eb_cb = parseFloat(row.querySelector('.calc-cb').value) || 0;

  const consumed = eb_cb - eb_ob;
  row.querySelector('.calc-consumed').value = consumed;  

  const amount = consumed * eb_rate; 
  row.querySelector('.calc-amount').value = amount.toFixed(3);  

  const vat = amount * 0.05;
  row.querySelector('.calc-vat').value = vat.toFixed(3);  

  const netamount = amount + vat;
  row.querySelector('.calc-netamount').value = netamount.toFixed(3);            
}   
</script>

补充说明 #

如果需要页面加载时就自动计算所有行的初始值，可以在页面加载完成后遍历所有.calc-row，逐行调用一次计算逻辑即可。

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