实现同class动态输入框值自动求和：增删改实时更新总计

原代码存在的问题 #

• 选择器错误：绑定事件时未使用类选择器的点号（.），导致事件无法触发；sum_of_ Debit存在多余空格，无法正确选中总和输入框
• 求和逻辑错误：输入框值变化时未重新遍历所有同类型输入框计算总和，只是累加现有总和，导致计算结果错误
• 动态操作未触发求和：添加新行、删除行后，未自动触发总和重新计算
• 事件绑定范围不足：未对动态添加的输入框绑定事件，导致新输入框值变化时不更新总和

修正后的完整代码 #

HTML部分

<table id="dynamic">
  <tr>
    <th class="wd-15p fontColor">credit</th>
    <th class="wd-15p fontColor">Debit</th>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" class="form-control credit" /></td>
    <td class="td"><input type="number" value="1000" class="form-control Debit" /></td>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" class="form-control credit" /></td>
    <td class="td"><input type="number" value="1000" class="form-control Debit" /></td>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" class="form-control credit" /></td>
    <td class="td"><input type="number" value="1000" class="form-control Debit" /></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_credit" readonly>
<input type="text" class="form-control sum_of_Debit" readonly>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

JavaScript部分

// 封装通用求和函数
function calculateSum(inputClass, sumTargetClass) {
  let total = 0;
  $(inputClass).each(function() {
    const value = parseFloat($(this).val()) || 0;
    total += value;
  });
  $(sumTargetClass).val(total);
}

// 初始化求和
$(document).ready(function() {
  calculateSum('.Debit', '.sum_of_Debit');
  calculateSum('.credit', '.sum_of_credit');
});

// 添加新行
$("#add-btn").click(function() {
  $("#dynamic").append('<tr>' +
    '<td class="td">' +
    '<input type="number" name="Debit" class="form-control Debit"/>' +
    '</td>' +
    '<td class="td">' +
    '<input type="number" class="form-control credit" />' +
    '</td>' +
    '<td class="td2">' +
    '<button type="button" name="add" class="btn btn-danger remove-tr"> Remove </button>' +
    '</td>' +
    '</tr>');
});

// 删除行并重新计算总和
$(document).on('click', '.remove-tr', function() {
  $(this).parents('tr').remove();
  calculateSum('.Debit', '.sum_of_Debit');
  calculateSum('.credit', '.sum_of_credit');
});

// 监听所有输入框的变化，实时更新总和
$(document).on('keyup change', '.Debit, .credit', function() {
  if ($(this).hasClass('Debit')) {
    calculateSum('.Debit', '.sum_of_Debit');
  } else {
    calculateSum('.credit', '.sum_of_credit');
  }
});

关键改进说明 #

• 封装通用求和函数，避免重复代码，只需传入输入框类名和总和显示框类名即可完成计算
• 使用事件委托绑定输入框的keyup和change事件，确保动态添加的输入框也能触发求和逻辑
• 添加新行后无需额外绑定事件，依赖事件委托即可覆盖；删除行后立即触发求和，自动剔除被删除行的数值
• 处理输入框为空的情况，用|| 0避免NaN错误

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