在 subTotal 文本框（`id=subTotal`）中显示所有价格文本框（`class=price`）的总和

Question

我有以下 html 表结构

<tr class="row" id="item10">
 <td><input type="text" name="barcode" class="barcode" style="width: 50px"/></td>
 <td><input type="text" name="type" class="type" readonly="true" style="width: 50px"/></td>
 <td><input type="text" name="color" class="color" readonly="true" style="width: 50px"/></td>
 <td><input type="text" name="qty" class="qty" style="width: 50px"/></td>
 <td><input type="text" name="unitprice" readonly="true"  class="unitPrice" style="width: 50px"/></td>
 <td><input type="text" name="price" class="price" style="width: 50px"/></td>
 </tr>



<tr  id="SubTotal">
     <td colspan="5">SubTotal</td>
      <td><input type="text" name="subTotal" id="subTotal" style="width: 50px"/></td>
  </tr>
    <tr  id="VAt">
        <td colspan="5">Vat</td>
         <td><input type="text" name="vat" id="vat" style="width: 50px"/></td>
     </tr>
     <tr  id="Total">
          <td colspan="5">Total</td>
            <td><input type="text" name="Total" id="Total" style="width: 50px"/></td>
     </tr>

可能没有<tr class="row">（动态生成）每个表行由其id标识 itemXXXX 是数字。

我在这里读取产品的条形码，然后将其详细信息填写在适当的文本框中。 然后，当我更改产品数量时，其相应的价格会在文本框中更新为 `class="price"'。

我的问题是当任何产品价格更改或在价格文本框中输入时。 所有产品价格的总和应显示在小计文本框中。

Answer 1

试试这个：

var $inputs = $('input[name=price]');
$inputs.change(function () {
    var sum = 0;
    $inputs.each(function () { 
        sum += +$(this).val() || 0; 
    });
    $('#subTotal').val(sum);
});

Answer 2

试试

$('table').on('change', '.row input[name="price"]', function () {
    var total = 0;
    $('.row input[name="price"]').each(function () {
        total += parseFloat(this.value)
    });
    $('#subTotal').val(total);
})

如果price字段的值被脚本改变了，那么也触发改变事件

.val(x).change()

Answer 3

附加 Jquery $table.on('change', 'td.price', function ...) 以检测每个价格字段的变化，然后在回调函数中使用 $.each on 'td.price'总结

Answer 4

您可以使用我提供的以下代码来获得总和，但请确保您必须将以下代码包装在 function 中并在所有情况下都可能调用它（在 blur,change 事件等中，基本上是 @ 987654323@change 事件在价格文本框更改时丢失focus.) 时发生。

var xSubTotal = 0;

$("tr.row input[name='price']").each(function(){
 xSubTotal += $(this).val();
});

$("#subTotal").val(xSubTotal);