JavaScript中addrow函数执行后sum计算功能失效问题求助

你的问题核心在于原sum()函数只针对初始固定ID的元素计算，新增行的输入框ID带序号（如shipping_line_cost1、base_tax_cost2），原函数里document.getElementById('shipping_line_cost')无法找到这些动态生成的元素，导致新增行的输入无法触发计算。此外，每个行的计算应该独立，仅计算当前行的运费与税费总和。

解决方案 #

1. 移除输入框的内联onkeyup="sum()"事件，改用jQuery事件委托绑定，确保动态生成的元素也能触发计算
2. 重构计算逻辑，通过触发事件的元素定位到所在行，仅计算当前行的数值并赋值给对应可收款输入框
3. 优化删除行后的序号排序，保持Sl No连续

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-1">
    <label for="Age">Sl No:</label>
    <input type="text" class="form-control sl" name="slno[]" value="1" readonly="">
  </div>
  <div class="col-sm-3">
    <label for="BL NO">BL NO:</label>
    <input type="text" class="form-control" name="bl_no[]" id="bl_no1" placeholder="Enter BL NO">
  </div>
  <div class="col-sm-3">
    <label for="container">CONTAINER:</label>
    <input type="text" class="form-control" name="container[]" id="container1" placeholder="Enter container">
  </div>
  <div class="col-sm-7">
    <label for="delivery_address">DELIVERY ADDRESS:</label>
    <input type="text" class="form-control" name="delivery_address[]" id="delivery_address1" placeholder="Enter Address">
  </div>
  <div class="col-sm-7">
    <label for="item_description">ITEM DESCRIPTION:</label>
    <input type="text" class="form-control" id="item_description1" name="item_description[]" placeholder="Enter item_description">
  </div>
  <div class="col-sm-3">
    <label for="delivery_date">DELIVERY DATE:</label>
    <input type="date" id="delivery_date1" name="delivery_date[]" class="form-control"/>
  </div>
  <div class="col-sm-3">
    <label for="shipping_line_cost">SHIPPING LINE COST:</label>
    <input type="number" class="form-control shipping-line-cost" name="shipping_line_cost[]"/>
  </div>
  <div class="col-sm-3">
    <label for="base_tax_cost">BASE TAX COST:</label>
    <input type="number" class="form-control base-tax-cost" name="base_tax_cost[]"/>
  </div>
  <div class="col-sm-3">
    <label for="additional_charges">ADDITIONAL CHARGES:</label>
    <input type="number" class="form-control" name="additional_charges[]"/>
  </div>
  <div class="col-sm-3">
    <label for="delivery_charge">DELIVERY CHARGE:</label>
    <input type="number" class="form-control" name="delivery_charge[]"/>
  </div>
  <div class="col-sm-3">
    <label for="mano_charge">MANO CHARGE:</label>
    <input type="number" class="form-control" name="mano_charge[]"/>
  </div>
  <div class="col-sm-3">
    <label for="collectible_amount">COLLECTIBLE AMOUNT:</label>
    <input type="number" class="form-control collectible-amount" name="collectible_amount[]" readonly/>
  </div>
</div>
<br/>
<div id="next"></div>
<br/>
<button type="button" name="addrow" id="addrow" class="btn btn-success pull-right">Add New Row</button>
<br/>
<br/>
<button type="submit" name="submit" class="btn btn-info pull-left">Submit</button>

修改后的JS代码 #

$('#addrow').click(function() {
  var length = $('.sl').length;
  var i = parseInt(length) + 1;
  var newrow = `
    <div class="row">
      <div class="col-sm-1">
        <label for="Age">Sl No:</label>
        <input type="text" class="form-control sl" name="slno[]" value="${i}" readonly="">
      </div>
      <div class="col-sm-3">
        <label for="BL NO">BL NO:</label>
        <input type="text" class="form-control" name="bl_no[]" id="bl_no${i}" placeholder="Enter BL NO">
      </div>
      <div class="col-sm-3">
        <label for="container">CONTAINER:</label>
        <input type="text" class="form-control" name="container[]" id="container${i}" placeholder="Enter container">
      </div>
      <div class="col-sm-7">
        <label for="delivery_address">DELIVERY ADDRESS:</label>
        <input type="text" class="form-control" name="delivery_address[]" id="delivery_address${i}" placeholder="Enter Address">
      </div>
      <div class="col-sm-7">
        <label for="item_description">ITEM DESCRIPTION:</label>
        <input type="text" class="form-control" id="item_description${i}" name="item_description[]" placeholder="Enter item_description">
      </div>
      <div class="col-sm-3">
        <label for="delivery_date">DELIVERY DATE:</label>
        <input type="date" id="delivery_date${i}" name="delivery_date[]" class="form-control"/>
      </div>
      <div class="col-sm-3">
        <label for="shipping_line_cost">SHIPPING LINE COST:</label>
        <input type="number" class="form-control shipping-line-cost" name="shipping_line_cost[]"/>
      </div>
      <div class="col-sm-3">
        <label for="base_tax_cost">BASE TAX COST:</label>
        <input type="number" class="form-control base-tax-cost" name="base_tax_cost[]"/>
      </div>
      <div class="col-sm-3">
        <label for="additional_charges">ADDITIONAL CHARGES:</label>
        <input type="number" class="form-control" name="additional_charges[]"/>
      </div>
      <div class="col-sm-3">
        <label for="delivery_charge">DELIVERY CHARGE:</label>
        <input type="number" class="form-control" name="delivery_charge[]"/>
      </div>
      <div class="col-sm-3">
        <label for="mano_charge">MANO CHARGE:</label>
        <input type="number" class="form-control" name="mano_charge[]"/>
      </div>
      <div class="col-sm-3">
        <label for="collectible_amount">COLLECTIBLE AMOUNT:</label>
        <input type="number" class="form-control collectible-amount" name="collectible_amount[]" readonly/>
      </div>
      <input type="button" class="btnRemove btn-danger" value="Remove"/>
    </div>
    <br>
  `;
  $('#next').append(newrow);
});

// 事件委托绑定计算事件，支持动态元素
$('body').on('keyup', '.shipping-line-cost, .base-tax-cost', function() {
  var $row = $(this).closest('.row');
  var shippingCost = parseInt($row.find('.shipping-line-cost').val()) || 0;
  var taxCost = parseInt($row.find('.base-tax-cost').val()) || 0;
  var total = shippingCost + taxCost;
  $row.find('.collectible-amount').val(total);
});

// 删除行并重新排序序号
$('body').on('click', '.btnRemove', function() {
  $(this).closest('.row').remove();
  // 重新编排Sl No序号
  $('.sl').each(function(index) {
    $(this).val(index + 1);
  });
});

关键改动说明 #

1. 给需要计算的输入框添加统一类名，替代原ID定位方式，避免动态ID的冲突问题
2. 使用事件委托绑定keyup事件，确保新增的动态元素也能触发计算
3. 计算时通过closest('.row')定位当前行，实现每行独立计算
4. 删除行后自动重新排序序号，保持Sl No的连续性
5. 用模板字符串拼接HTML，提升代码可读性与维护性

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