ダイナミックフィールド - 合計の加算 - 各行

Question

問題があります。誰かが出くわして助けてくれることを願っています。私は同様の質問を掲載しましたが解決しましたが、新しい問題についてはこれ以上助けがなかったので、私はその質問に投稿したいと思っていました（これはタブーであれば申し訳ありません）。

 <table border="1" class="autoTable"> 
<tr> 

<td>Description</td><td>Stocked</td><td>Quantity</td><td>Part Price</td> 
<td>Hours</td>  
<td>Rate Class</td><td>Total</td><td>Approved</td><td>Add New Row</td>  
<td>Remove Row</td></tr> 
<tr> 
<td><input name="description[]" id="description" value="<?php echo $description; ?>" size="55" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" /> 

</td><td align="center"><input type="checkbox" name="stocked[]" id="stocked" value="<?php echo $stocked; ?>" size="5" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" /> 
</td><td><input name="quantity[]" id="quantity" value="<?php echo $quantity; ?>" size="5" class="numeric add_to_total quantity" onKeyPress="return disableEnterKey(event)" /> 
</td><td><input name="partPrice[]" id="partPrice" value="<?php echo $partPrice; ?>" size="10" class="numeric add_to_total part" onKeyPress="return disableEnterKey(event)" /> 
</td><td><input name="hours[]" id="hours" value="<?php echo $hours; ?>" size="10" class="numeric add_to_total hours" onKeyPress="return disableEnterKey(event)" /> 
</td><td><select name="rate[]" id="rate" class="numeric add_to_total rate" onKeyPress="return disableEnterKey(event)"> 
<?php 
    //php code here for rates 
?> 
</select> 
</td><td><input name="total[]" id="total" size="10" class="numeric is_total" onKeyPress="return disableEnterKey(event)" /> 
</td><td align="center"><input type="checkbox" name="approved[]" id="approved" value="<?php echo $approved; ?>" size="10" onKeyPress="return disableEnterKey(event)" /> 
</td><td align="center"><img src="img/plus.png" width="25" height="25" id="addButton" title="Add New Row" class="addRow" /> 
</td><td align="center"><img src="img/x.png" width="25" height="25" id="removeButton" title="Remove Row" class="delRow" /> 
</td></tr> 
</table> 

次のコードを使用して合計行を追加しますが、2番目以降の動的行では機能しません。

$(".add_to_total").change(function() { 
    var total = 0; 
    $(".add_to_total").each(function() { 
     var quantity = parseFloat($(".quantity").val()) || 0; 
     var part = parseFloat($(".part").val()) || 0; 
     var hours = parseFloat($(".hours").val()) || 0; 
     var rate = parseFloat($(".rate").val()) || 0; 
     total = (Number(quantity) * Number(part)) + (Number(rate) * Number(hours)); 
    }); 
    $(".is_total").val(total); 
}); 

私は、誰かが私を助けることができる願っています...私は私が考えることができるすべてのものを試してみた、と私は本当にこの事を解決取得したい、と私の人生:)

で上に移動します前もって感謝します。

Answer 1

クラスはadd_to_total、quantity、part、hours、rateまたはis_totalがあなたのHTMLのどこにいるか、私は見ていない、またはあなたが、結果としてあなたのJavaScriptで選択しようとしているどの要素...このことができます願っています。 ..

EDIT：

再びそれについて考え、それが新たに追加された行add_to_total分類要素拘束されるものではないトンの結果であるかもしれませんoイベントを変更する。 .live()/.on() jQueryイベントの使用を検討しましたか（使用しているjQueryのバージョンによって異なります）

// using the .live() event... 
$(".add_to_total").live('change', function(){ ... }); 

// using the .on() event... 
$(".add_to_total").on('change', function(){ ... }); 

EDIT：

母

http://api.jquery.com/live/（jQueryの< 1.7）

http://api.jquery.com/on/（jQueryの> = 1.7）

たぶん、このような何かを実装！うまくいけば最後の編集！さて、次のコードを考慮：

var quantity = parseFloat($(".quantity").val()) || 0; 

は、これは常に要素の集合が実際に選択されるが...これはjQueryので.val()関数の機能だけで、値最初$(".quantity")さんを返します。あなたが言っているように、行のそれぞれに対してプロセスの計算が行われます。簡略化すると、現在のadd_to_totalのTR要素を取得し、その子にのみフォーカスし、次に進む必要があります。

これは明らかに不必要な計算の多くを処理している、と私は計算が直接、むしろそれらを介してそれらを実行し、ループ持っている必要があります行のそれぞれにクラスを追加し、むしろお勧めします：

<tr class="dynamic_row"> ... </tr> 

その後Javascriptで：

$(".add_to_total").on('change', function() { 
    var total = 0; 
    $(".dynamic_row").each(function() { 
     var row = $(this); 
     var quantity = parseFloat(row.find(".quantity").val()) || 0; 
     var part = parseFloat(row.find(".part").val()) || 0; 
     var hours = parseFloat(row.find(".hours").val()) || 0; 
     var rate = parseFloat(row.find(".rate").val()) || 0; 
     total = (Number(quantity) * Number(part)) + (Number(rate) * Number(hours)); 
    }); 
    row.find(".is_total").val(total); 
}); 

希望します。:)

Answer 2

Chrisの提案のおかげで、私はrow.find(".is_total").val(total); をその行に関連付けるように移動しました。彼の提案では、彼はそれが宣言された要素の外にあったので、私はと考えて関数は私たちが何を言っているのか分からなかった。

私も
$(".add_to_total").change(function() {
を変更：私は彼の編集＃3からそれを理解するよう、各のoccuranceの上に機能させるために
$(".add_to_total").live('change',function() {
。

ので、合計を計算するために、最終的な機能は次のとおりです。私は、スタックオーバーフロー比較的新人ですので

$(".add_to_total").live('change',function() { 
    var total = 0; 
    $(".dynamic_row").each(function() { 
     var row = $(this); 
     var quantity = parseFloat(row.find(".quantity").val()) || 0; 
     var part = parseFloat(row.find(".part").val()) || 0; 
     var hours = parseFloat(row.find(".hours").val()) || 0; 
     var rate = parseFloat(row.find(".rate").val()) || 0; 
     total = (Number(quantity) * Number(part)) + (Number(rate) * Number(hours)); 
     row.find(".is_total").val(total); 
    }); 
}); 

、私は彼にすべての信用を与える方法がわからないんだけど、彼のように受け入れることよりも、他の受け入れられた回答、および便利なオプションを有効にすることができます。

ありがとうございました！