使用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計算

回答

相關問題