Суммировать все значения для столбца таблицы на основе класса

Я пытаюсь получить сумму всех значений в td на основе определенного класса. Код не вызывает ошибок, но моя сумма ведет к "0".

Нужно ли указывать числовые значения определенным образом? Я видел некоторые другие ответы здесь, на SO, где имитировал код, и я не вижу никакой реальной разницы между моими и их, поэтому я смущен тем, почему моя работа не работает.

Вот учебник, который я прочитал для справки: 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>

Ответ 1

Вы хотите использовать 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 (вызываете calculateSum) несколько раз. Вы можете заменить

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

с

$(calculateSum);

Ответ 2

У меня есть плагин JQuery, Sumtr, который отлично справляется с этой задачей, если вам нужна сводная строка.

Вот ваш пример с плагином.