Question

我在jquery中有这种类型的练习。到这里http://jsfiddle.net/LAntL/3/

对于Item 1，如果我添加数量为Size 7的#no，则应在文本框中显示multiplied by Item 1's Price，结果应显示在Item 1's Ext文本框中。然后，如果我对size 8.5 of Item 1执行相同的操作，它应该执行相同的操作。

但是Ext将有(Price x Size 7 Qty) + (Price x Size 8.5 Qty)

Item 2也会发生同样的情况。除此之外，Total quantity and Total price将在每个文本框的keypress事件中更新。

我是jquery的初学者，并且进行了这次杀戮练习。请帮助别人。

提前致谢。

Answer 1

我建议您为字段分配一些类，以便jQuery可以轻松找到它们：

"lineQty"   - add this class to all the qty fields
"lineTotal" - add this class to all the line total fields
"linePrice" - I think you can see where I'm going with this
"lineExt"   - add to all ext fields

然后，以下.keyup函数将自动对所有行进行更新。

$(document).ready(function() {

    $(".lineQty").keyup(function() {
       // 'this' is the field the user is typing in
       // so find the tr that it belongs to
       var $row = $(this).closest("tr"),
           total = 0,
           // get the price for the current row:
           price = $row.find(".linePrice").val();

        // loop through every qty field for the current row and add
        // the entered value to the total, using unary plus to convert
        // to a number, and a default of 0 if non-numeric data is entered
        $row.find(".lineQty").each(function() {
            total += +this.value || 0;
        });

        // set the total for the current row
        $row.find(".lineTotal").val(total);

        // set the price for the current row
        $row.find(".lineExt").val(total * price);

        // now add up the grand totals
        var grandTotal = 0,
            grandPrice = 0;
         $(".lineTotal").each(function() {
           grandTotal += +this.value || 0;
        });
        $(".lineExt").each(function() {
            grandPrice += +this.value || 0;
        });
        $("[name='data[totalQuantity]']").val(grandTotal);
        $("[name='data[totalPrice]']").val(grandPrice);
    }); 

});

工作演示：http://jsfiddle.net/LAntL/5/（仅适用于第一行，因为我无法将类分配给所有你的字段 - 你需要添加我上面谈到的类根据我对第一行所做的每一个领域。）

Answer 2

好的，你想学点东西，所以我会描述一种可能的方法，而不是给你完成的解决方案。

首先，您应该标记包含class="item"项的表格。现在你可以在jQuery中编写一个选择器，它可以分别获取每个项目。然后你应该标记所有具有特殊功能的单元格（<td>）。总计，价格，光盘和分机你的表应该是这样的：

<table class="item">
  <tr>
    <td>...</td>

    <td class="total">...</td>
    <td class="price">...</td>
    <td class="disc">...</td>
    <td class="ext">...</td>
  </tr>
</table>

现在，您可以使用类“item”为表内的所有输入字段编写选择器。

$('.item input').change(function(){});

在此功能内部，您可以处理计算。起初我会建议得到这个项目：

$('.item input').change(function(){
   var item = $(this).closest('table.item');
   var totalInput = $(item).find('.total input');
   var priceInput = $(item).price('.price input');
   // ...

   var allWriteableInputs = $(item).find('input[readonly!="readonly"]');

   // do the calculation
   var sum = 0;
   $(allWriteableInputs).each(function(i, input){
       sum += $(input).val();
   });
   $(totalInput).val(sum);
});

如果你这样做，你不需要：

onkeypress="return isNumberKey(event);"和
每个输入框的id="product1Total"

我希望这种引人深思的冲动对你有所帮助。我还有很长的路要走，我年轻的padawan; - ）

使用jquery onkeypress进行计算

2 个答案: