将所有价格文本框(`class=price`)的总和显示为subTotal文本框(`id=subTotal`)

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>

可能有一个no的<tr class="row">(动态生成)，每个表行都由其id itemXX、XX为编号来标识。

在这里，我阅读产品条形码，然后在适当的文本框中填充其细节。然后，当我改变产品的数量时，它相应的价格在文本框中用`class=“价格”更新。

我的问题是什么时候任何产品的价格被更改或输入价格文本框。所有产品价格的总和应显示在subTotal文本框中。

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'，函数.)要检测每个价格字段中的变化，然后在回调函数中使用$.each on 'td.price‘求和