jquery onkeypressを使った計算

Question

私はjqueryでこのタイプの運動をしています。私はSize 7の量の#NOを追加した場合、それがテキストボックスにmultiplied by Item 1's Price表示する必要があるとの結果がItem 1's Extテキストボックスに表示されるはずです、ここItem 1についてはhttp://jsfiddle.net/LAntL/3/

を移動します。 もし私が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); 
}); 

あなたはこの道を行けば、あなたは必要はありません。すべての入力ボックス ため

1. onkeypress="return isNumberKey(event);"と
2. id="product1Total"を

   私はこの思考誘発衝動があなたを少し助けてくれることを願っています。あなたはまだ長い道のりがある、私の若いパダワン;-)