使用JQuery实现动态行计算问题：删除行后总价不更新

当前代码存在两个问题：

• 删除商品行后，「Total Price」字段不会自动更新，仍保留删除前的求和结果
• 未实现「Total Due」的计算逻辑，公式为：Total Due = (Previous Due + Total Price) - Pay Now

修改后的HTML代码 #

<div class="row">
    <div class="col-md-8">
       <div class="table-responsive">
          <table id="test-table" class="table table-bordered">
             <thead>
                <tr>
                   <th>Product</th>
                   <th>Price </th>
                   <th><input id='add-row' class='btn btn-primary' type='button' value='Add' /> </th>
                </tr>
             </thead>
             <tbody id="test-body">
                <tr id="row0" class="products">
                   <td>
                      <select name="product_id[]" class="form-control">
                         <option value="">-- Select Product --</option>
                         @foreach ($product as $row )
                         <option value="{{ $row->id }}">{{ $row->product_name }}</option>
                         @endforeach
                      </select>
                   </td>
                   <td>
                      <input name="price[]" type="number" min="1" class="form-control input-md price" />
                   </td>
                   <td>
                      <input class="delete-row btn btn-primary" type="button" value="Delete" />
                   </td>
                </tr>
             </tbody>
          </table>
       </div>
    </div>
    <div class="col-md-4">
       <div class="col-xs-6">
          <p>Previous Due</p>
       </div>
       <div class="col-xs-6">
          <input type="text" class="form-control previous_due" value="5000" readonly>
       </div>
       <div class="col-xs-6">
          <p>Total Price</p>
       </div>
       <div class="col-xs-6">
          <input type="text" class="form-control total_price" value="" readonly>
       </div>
       <div class="col-xs-6">
          <p>Pay Now</p>
       </div>
       <div class="col-xs-6">
          <input type="number" class="form-control pay_now">
       </div>
       <div class="col-xs-6">
          <p>Total Due</p>
       </div>
       <div class="col-xs-6">
          <input type="number" value="" class="form-control total_due" readonly>
       </div>
    </div>
 </div>

修改后的JavaScript代码 #

<script type="text/javascript">
  var row=1;
  $(document).on("click", "#add-row", function () {
    // 修复name属性，保持数组格式让后端正确接收
    var new_row = '<tr id="row' + row + '" class="products"><td> <select name="product_id[]" class="form-control"> <option value="">-- Select Product --</option> @foreach ($product as $product_row ) <option value="{{ $product_row->id }}">{{ $product_row->product_name }}</option>@endforeach  </select></td><td><input name="price[]" type="number" min="1" class="form-control price" /></td><td><input class="delete-row btn btn-primary" type="button" value="Delete" /></td></tr>';

    $('#test-body').append(new_row);
    row++;
    // 新增行后同步更新计算结果
    sumIt();
    calculateTotalDue();
    return false;
  });

  $(document).on("click", ".delete-row", function () {
    if(row>0) {
      $(this).closest('tr').remove();
      row--;
      // 删除行后立即更新总价和应付总额
      sumIt();
      calculateTotalDue();
    }
    return false;
  });

  // 计算商品总价
  function sumIt() {
    var total = 0, val;
    $('.price').each(function() {
      val = $(this).val();
      val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
      total += val;
    });
    $('.total_price').val(Math.round(total));
  }

  // 计算应付总额
  function calculateTotalDue() {
    var previousDue = parseFloat($('.previous_due').val()) || 0;
    var totalPrice = parseFloat($('.total_price').val()) || 0;
    var payNow = parseFloat($('.pay_now').val()) || 0;
    var totalDue = (previousDue + totalPrice) - payNow;
    // 确保应付金额不为负数（可根据业务需求调整）
    totalDue = Math.max(totalDue, 0);
    $('.total_due').val(totalDue);
  }

  $(function() {
    // 价格输入变化时更新总价和应付总额
    $(document).on('input', '.price', function() {
      sumIt();
      calculateTotalDue();
    });
    // 付款金额变化时更新应付总额
    $(document).on('input', '.pay_now', calculateTotalDue);
    // 页面加载时初始化计算
    sumIt();
    calculateTotalDue();
  });
</script>

关键改动说明 #

• 删除行后同步计算：在删除行的点击事件中调用求和与应付总额计算函数，确保删除后数据实时更新
• 修复表单数组格式：把新增行里的product_id[]' + row + '改为product_id[]，避免后端无法识别为数组；同时修改循环变量名避免冲突
• 添加类名简化取值：给「Previous Due」「Pay Now」「Total Due」添加专属类名，方便JS快速获取和设置值
• 新增应付总额计算逻辑：按照需求公式实现calculateTotalDue()，并在价格变化、付款金额变化、增删行时自动触发
• 初始化计算：页面加载时自动执行一次计算，确保初始状态显示正确结果

内容的提问来源于stack exchange，提问作者Shan Md Shazarul Haque 171-15-