jQuery实现动态添加输入行的每行总价计算解决方案问询

嘿，这个问题我太熟悉了！动态生成的元素没法直接绑定事件，这是新手常踩的坑——因为页面初始化的时候这些输入框还不存在，直接绑定的事件根本找不到它们。咱们用jQuery的事件委托就能搞定，下面是修改后的完整代码，我会把关键改动标出来：

$(function () { 
  $("#btnAdd").bind("click", function () { 
    var div = $("<tr />"); 
    div.html(GetDynamicTextBox("")); 
    $("#TextBoxContainer").append(div); 
  }); 

  $("body").on("click", ".remove", function () { 
    $(this).closest("tr").remove(); 
  }); 

  // 👇 关键新增：用事件委托监听动态输入框的keyup事件
  $("#TextBoxContainer").on("keyup", ".qty, .price", function() {
    // 找到当前输入框所在的行
    const $currentRow = $(this).closest("tr");
    // 获取数量和单价，空值或非数字时默认0
    const quantity = parseFloat($currentRow.find(".qty").val()) || 0;
    const unitPrice = parseFloat($currentRow.find(".price").val()) || 0;
    // 计算总价，保留两位小数更规范
    const totalPrice = (quantity * unitPrice).toFixed(2);
    // 把结果赋值给当前行的total输入框
    $currentRow.find(".total").val(totalPrice);
  });
}); 

function GetDynamicTextBox(value) { 
  return '<td><input name = "particular[]" type="text" class="form-control" placeholder="Particulars" required /></td>'+ 
         '<td><input name = "hsn[]" type="text" class="form-control" placeholder="HSN" required /></td>' + 
         '<td><input name = "qty[]" type="number" class="form-control qty" placeholder="Quantity" required /></td>' + 
         '<td><input name = "price[]" type="number" class="form-control price" placeholder="Price" required /></td>' + 
         '<td><input name = "total[]" type="number" class="form-control total" placeholder="Total" required readonly /></td>' + 
         // 👆 这里加了readonly，防止用户手动改总价，保证计算结果准确
         '<td><button type="button" class="btn btn-sm btn-danger remove" data-toggle="tooltip" data-original-title="Remove materials items"><i class="fa fa-trash"></i></button></td>' 
} 

另外我发现你的HTML表格里有个小问题，thead里少了「Total」列，tfoot的colspan也不对，我一起帮你修正了：

<table class="table table-striped table-bordered" id="particulars_table"> 
  <thead> 
    <tr> 
      <td>Particular</td> 
      <td>HSN</td> 
      <td>Qty</td> 
      <td>Rate</td> 
      <td>Total</td> <!-- 👈 补上Total列，表格结构更完整 -->
      <td>Action</td> 
    </tr> 
  </thead> 
  <tbody id="TextBoxContainer"> 
  </tbody> 
  <tfoot> 
    <tr> 
      <th colspan="6"> <!-- 👈 列数变成6，所以colspan改成6 -->
        <button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button> 
      </th> 
    </tr> 
  </tfoot> 
</table>

为啥这么改？给你拆解下核心逻辑： #

1. 事件委托的原理：我们把keyup事件绑定到已经存在的父元素#TextBoxContainer上，而不是直接绑定到动态生成的.qty/.price上。这样不管后续添加多少行，新输入框触发的事件都会冒泡到父元素被捕获，完美解决动态元素的事件绑定问题。
2. 精准定位当前行：用$(this).closest("tr")快速找到当前输入框所在的行，确保我们只计算当前行的总价，不会干扰其他行的数据。
3. 容错处理：用parseFloat()把输入值转成数字，再加|| 0处理空值或非数字的情况，避免出现NaN这种奇怪的结果。
4. 体验优化：给total输入框加readonly，防止用户手动修改总价，保证数据的一致性；用toFixed(2)保留两位小数，符合金额的展示规范。

这样改完之后，不管是第一次添加的行，还是后续点击「Add」新增的行，只要修改数量或单价，对应的总价都会自动实时更新啦！

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