使用jquery onkeypress计算

我在jquery中有这种类型的练习。去这里http://jsfiddle.net/LAntL/3/使用jquery onkeypress计算

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

但内线将有(Price x Size 7 Qty) + (Price x Size 8.5 Qty)会发生的Item 2

一样。与此同时，Total quantity and Total price将在每个文本框的keypress事件中更新。

我是jquery的初学者，得到了这个杀戮的练习。请帮助别人。

在此先感谢。

来源

2012-01-09 gautamlakum

我建议你分配一些类的领域，这样的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/（仅适用于第一行，因为我不能打扰分配类所有的领域 - 你需要我讲上面的类添加到每个领域按照我为第一行做了什么）。

来源

2012-01-09 13:15:42 nnnnnn

嘿nnnnnn，谢谢。我几乎没有修改过，以使我的模块工作。 – gautamlakum 2012-01-10 07:09:28

好的，你想学点东西，所以我会描述一个可能的方法，并且不要给你最终的解决方案。

首先，您应该标记包含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 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 ;-)

来源

2012-01-09 13:21:19 Armin

使用jquery onkeypress计算

回答

相关问题