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标识 itemXX XX是数字。

在这里，我阅读产品的条形码，然后将其详细信息填入相应的文本框中。然后，当我更改产品数量时，相应的价格会在文本框中以“class =”price“'更新。

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

Answer 1

尝试

$('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 2

试试这个：

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

Answer 3

附加Jquery $ table.on（'change'，'td.price'，function ...）来检测每个price字段的变化，然后在回调函数中使用$ .each'td.price'总结

Answer 4

您可以使用我提供的以下代码获取总和，但请确保您必须在function中包含以下代码并在所有情况下调用它（在blur,change事件中当价格文本框发生变化时，基本上textbox's更改事件会在失去focus时发生。{

var xSubTotal = 0;

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

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

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

4 个答案: