实现动态行数量与金额自动求和，增删行实时更新总和

• 页面加载完成后，在sum_of_quantity和sum_of_amount这两个只读输入框中，分别显示所有quantity输入框的总和、amount输入框的总和
• 点击「Add More」添加新行、点击「Remove」删除行时，自动更新两个总和
• 修改任意quantity或amount输入框的值时，总和同步更新

现有代码已实现动态增删行功能，但求和逻辑存在问题，需完善以满足上述需求。

现有HTML结构 #

<table id="dynamicAddRemove">
        <tr>
          <th class="wd-15p fontColor">Quantity</th>
          <th class="wd-15p fontColor">Amount</th>
        </tr>
        <tr>
          <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity"/></td>
          <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount"/></td>
        </tr>
        <tr>
          <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity"/></td>
          <td class="td"><input type="number" value="1000" name="amount[]"class="form-control amount"/></td>
        </tr>
        <tr>
          <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity"/></td>
          <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
          <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
        </tr>
      </table>

总和输出输入框 #

<input type="text" class="form-control sum_of_quantity" readonly>
<input type="text" class="form-control sum_of_amount" readonly >

现有jQuery代码 #

$("#add-btn").click(function() {
$("#dynamicAddRemove").append('<tr><td class="td"><input type="number" name="quantity" class="form-control quantity"/></td>
 <td class="td"><input type="number" value="1000" name="amount" class="form-control amount"/></td>
 <td class="td2"><button type="button" value="1000" name="add" class="btn btn-danger remove-tr">Remove</button></td></tr>');
  });
  $(document).on('click', '.remove-tr', function() {
    $(this).parents('tr').remove();
  });

    $(document).ready(function() {
      var total =0;
        $('.quantity').each(function() {
          total += parseFloat($(this).val());
          $('.one').val(total);
        });
        var sum =$('.one').val();
        $(" .quantity").on("change keyup", function() {
        sum += parseFloat($(this).val());
      $('.one').val(sum).toFixed(2);
    });
      });

修正后的解决方案 #

现有代码的核心问题：仅处理了quantity的部分求和逻辑、使用了不存在的选择器、动态添加的元素未绑定事件、输入值为空时会导致求和异常、修改输入值时的累加逻辑错误。

修正后的完整jQuery代码：

// 封装通用求和函数，统一计算两个字段的总和
function calculateTotals() {
    // 计算quantity总和
    let quantityTotal = 0;
    $('.quantity').each(function() {
        // 处理空值或非数字，转为0
        const val = parseFloat($(this).val()) || 0;
        quantityTotal += val;
    });
    $('.sum_of_quantity').val(quantityTotal.toFixed(2));

    // 计算amount总和
    let amountTotal = 0;
    $('.amount').each(function() {
        const val = parseFloat($(this).val()) || 0;
        amountTotal += val;
    });
    $('.sum_of_amount').val(amountTotal.toFixed(2));
}

$(document).ready(function() {
    // 页面加载完成后计算初始总和
    calculateTotals();

    // 添加新行逻辑
    $("#add-btn").click(function() {
        $("#dynamicAddRemove").append(`<tr>
            <td class="td"><input type="number" name="quantity[]" class="form-control quantity" value="1000"/></td>
            <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount"/></td>
            <td class="td2"><button type="button" name="remove" class="btn btn-danger remove-tr">Remove</button></td>
        </tr>`);
        // 添加后更新总和
        calculateTotals();
    });

    // 删除行逻辑
    $(document).on('click', '.remove-tr', function() {
        $(this).parents('tr').remove();
        // 删除后更新总和
        calculateTotals();
    });

    // 监听所有quantity和amount的输入变化，实时更新总和
    $(document).on('change keyup', '.quantity, .amount', function() {
        calculateTotals();
    });
});

修正说明 #

1. 用calculateTotals函数统一处理求和逻辑，避免重复代码
2. 处理输入框空值/非数字情况，确保求和不会出现NaN
3. 动态添加行时，保持name属性与初始行一致（quantity[]/amount[]），并添加默认值
4. 所有触发总和变化的操作（页面加载、增删行、输入修改）都调用求和函数，保证实时同步
5. 使用事件委托监听动态生成的输入框，确保新添加的行也能触发求和更新

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