tổng tất cả các giá trị cho cột bảng dựa trên lớp

Question

Tôi đang cố gắng lấy tổng của tất cả các giá trị trong một td dựa trên một lớp cụ thể. Mã không ném lên bất kỳ lỗi nào nhưng tổng của tôi giữ kết quả là "0".

Các giá trị số có phải được chỉ định theo một cách cụ thể không? Tôi thấy một số câu trả lời khác ở đây trên SO từ nơi đã bắt chước mã, và tôi không thấy bất kỳ sự khác biệt thực sự giữa tôi và của họ để im nhầm lẫn là tại sao tôi không làm việc.

Đây là một hướng dẫn tôi đi theo để tham khảo: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html

Đây là javascript tôi

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

Dưới đây là html của tôi

<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

Bạn muốn sử dụng text() thay vì this.value (kể từ <td> s không có "giá trị"):

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

Ngoài ra, bạn đang lặp qua các thành phần .price của mình (gọi calculateSum) nhiều lần. Bạn có thể thay

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

với

$(calculateSum); 

Answer 2

Tôi có một plugin JQuery, Sumtr, để xử lý này khá tốt nếu bạn muốn có một dòng tóm tắt.

Đây là số example của bạn bằng plugin.