使用jquery onkeypress进行计算

Calculation using jquery onkeypress

本文关键字：计算 onkeypress jquery 使用      更新时间：2023-09-26

我在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的初学者，做了这个致命的练习。请帮帮别人。

提前谢谢。

我建议您为字段分配一些类，以便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/（只适用于第一行，因为我不愿意为所有字段分配类-你需要按照我在第一行中所做的将我上面谈到的类添加到每个字段中）。

好吧，你想学习一些东西，所以我将描述一种可能的方法，而不给你最终的解决方案。

首先，您应该用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);
});

如果你走这条路，你不需要：

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

我希望这种发人深省的冲动能对你有所帮助。你还有很长的路要走，我年轻的学徒；-）

相关文章：