无法在jQuery中实现逐行实时计算（单价×数量及总计）

我看了你的代码，问题主要出在事件绑定范围、变量命名冲突和元素选择错误上，咱们一步步把它修好：

问题根源拆解 #

1. 事件触发不全面：你只给.amount绑定了keyup事件，但修改数量（.qty）的时候也应该触发计算，不然只改数量不会更新小计；
2. 变量重复声明冲突：你在计算总计的函数里，先声明了var amount = 0;，又在循环里用var amount = $(this).find('.amount').val()，直接覆盖了总计变量，导致总计计算失效；
3. 元素选择错误：$(this).find('.total1')是找当前输入框所在行里的.total1，但你的总计元素在表格外面的div里，根本找不到；
4. 未处理字符串转数字：输入框的值是字符串类型，直接相乘会变成字符串拼接（比如输入"2"和"3"会得到"23"），必须转成数字计算。

修复后的完整代码 #

HTML部分

<div class="form-group">
  <form name="add_name" id="add_name">
    <div class="table-responsive">
      <table class="table table-bordered" id="dynamic_field">
        <tr>
          <td><input type="text" name="qty[]" placeholder="Enter your Qty" class="form-control qty" /></td>
          <td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td>
          <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
          <td>Amount<label class="total"></label></td>
        </tr>
      </table>
      <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
    <div>total <label class='total1'></label></div>
  </form>
</div>

JavaScript部分

$(document).ready(function(){
  // 动态添加行
  let i=1;
  $('#add').click(function(){
    i++;
    $('#dynamic_field').append(`<tr id="row${i}">
      <td><input type="text" name="qty[]" placeholder="Enter your qty" class="form-control qty" /></td>
      <td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td>
      <td><button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove">X</button></td>
      <td>Amount<label class="total"></label></td>
    </tr>`);
  });

  // 移除行
  $(document).on('click', '.btn_remove', function(){
    const button_id = $(this).attr("id");
    $('#row'+button_id).remove();
    // 移除后重新计算总计
    calculateTotals();
  });

  // 监听数量和单价的输入变化，触发计算
  $(document).on('keyup', '.qty, .amount', function(){
    calculateTotals();
  });

  // 统一计算小计和总计的函数
  function calculateTotals(){
    let totalSum = 0;
    $('tr').each(function(){
      // 把输入值转成数字，空值或非数字当成0处理
      const qty = parseFloat($(this).find('.qty').val()) || 0;
      const amount = parseFloat($(this).find('.amount').val()) || 0;
      // 计算当前行小计
      const rowTotal = qty * amount;
      $(this).find(".total").text(rowTotal.toFixed(2)); // 保留两位小数更规范
      // 累加到总计
      totalSum += rowTotal;
    });
    // 更新总计显示
    $('.total1').text(totalSum.toFixed(2));
  }
});

关键修复说明 #

• 统一计算函数：把计算逻辑抽成calculateTotals()函数，不管是新增行、移除行还是输入值变化，都调用这个函数，逻辑更清晰；
• 扩展事件监听：同时监听.qty和.amount的keyup事件，修改任何一个输入框都会更新计算；
• 变量命名优化：用totalSum作为总计变量，避免和单价的amount冲突；
• 数字转换与容错：用parseFloat()转数字，加上|| 0处理空值或非数字输入，避免NaN；
• 修正元素选择器：直接用$('.total1')找到表格外的总计元素；
• 移除行后重新计算：删除行后主动调用calculateTotals()，确保总计实时更新。

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