suma wszystkich wartości dla kolumny tabeli na podstawie klasy

Question

Próbuję pobrać sumę wszystkich wartości w td na podstawie określonej klasy. Kod nie generuje żadnych błędów, ale moja suma daje wynik "0".

Czy wartości liczbowe muszą być określone w określony sposób? Widziałem tutaj inne odpowiedzi na temat SO, z których naśladowałem kod, i nie widzę żadnej prawdziwej różnicy między moim a ich, więc jestem zdezorientowany, dlaczego moje nie działa.

Oto samouczek i następnie na odniesienie: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html

Oto mój 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);  
}; 

Oto mój 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> 

Answer 1

Chcesz użyć text() zamiast this.value (od <td> s nie mają "wartości"):

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); 
    } 
}); 

Co więcej, zapętlasz swoje elementy .price (wywołując calculateSum) wiele razy. Można zastąpić

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

z

$(calculateSum); 

Answer 2

Mam plugin jQuery Sumtr, który obsługuje to całkiem dobrze, jeśli chcesz wiersz podsumowania.

Oto Twoja example z wtyczką.