2012-02-15 23 views
17

特定のクラスに基づいてtd内のすべての値の合計を取得しようとしています。コードはエラーをスローしませんが、私の合計は "0"になります。クラスに基づいてテーブル列のすべての値を合計します

数値は特定の方法で指定する必要がありますか?私はコードを模倣していたので、ここで他にもいくつかの答えを見ました。私と私の実際の違いは分かりません。ここで

は、私は参考のために続くチュートリアルでは、次のとおりです。ここではここhttp://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html

は私のjavascriptのある

$(document).ready(function(){ 
$('.price').each(function() { 
    calculateSum(); 
}); 
}); 

function calculateSum() { 

var sum = 0; 
//iterate through each td based on class and add the values 
    $(".price").each(function() { 

     //add only if the value is number 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     } 

    }); 
$('#result').text(sum);  
}; 

は私のhtml

<table border="1"> 
<tr> 
<th>Item</th> 
<th>Price</th> 
</tr> 
<tr> 
<td>Banana</td> 
<td class ="price">50</td> 
</tr> 
<tr> 
<td>Apple</td> 
<td class ="price">100</td> 
</tr> 
</table> 

<div id="result"></div> 

答えて

34

であるあなたは、以来、text()代わりのthis.valueを(使用したいです<td>に「値」がありません):

var sum = 0; 
// iterate through each td based on class and add the values 
$(".price").each(function() { 

    var value = $(this).text(); 
    // add only if the value is number 
    if(!isNaN(value) && value.length != 0) { 
     sum += parseFloat(value); 
    } 
}); 

また、.price要素()を複数回ループしています。あなたは、私はかなりよくあなたが要約行をしたい場合は、これを処理するjQueryプラグイン、Sumtrを、持っている

$(calculateSum); 
+0

これは素晴らしいことでした。私はあなたが記述する方法で要素をループするためのコードを短縮できることを知りませんでした。それは非常に便利でした。ありがとう –

+0

まあ、私はループしていたコードを短縮しませんでした。あなたは二度ループしていた。 1つはあなたの 'onload'ハンドラにあり、' calculateSum() '関数自体の中にあります。私は前者を取り除いた。私は 'ready'ハンドラの定義をショートカットしました。 –

+0

それは私を助けた、ありがとうRob – StreetCoder

3

$(document).ready(function(){ 
    $('.price').each(function() { 
     calculateSum(); 
    }); 
}); 

を置き換えることができます。

ここにあなたのexampleプラグインがあります。

+0

それは本当にきれいです。早くこの図書館を見たことがありましたら幸いです。それは私にいくつかの時間を節約していただろう。どうも返答いただきありがとうございます。私は将来の参照のためにこれに注目していきます。 –

+2

昨日作成しました。 :-) – Larsenal

+1

これは素晴らしい、それは正確に何を探していた複数の列を処理します。どうもありがとう! – hanzolo

関連する問題