關於使用jQuery獲取表列總和的問題

Question

能否請您看一下這個演示，讓我知道為什么我沒有得到總和。 app單元？

 var total = 0; $(".app").each(function() { total += parseInt($(this).val()); }); $("#total").html(total); 

 #total { height: 100px; width: 100px; padding: 15px; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td class="app">50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td class="app">94</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td class="app">94</td> </tr> </table> <br /> <div id="total"></div> 

Answer 1

更改parseInt($(this).val()); parseInt($(this).html()); 因為td單元格沒有任何value屬性，並且將total的color屬性更改為#000 （黑色），因為輸出將不可見。

 var total = 0; $(".app").each(function() { total += parseInt($(this).html()); }); $("#total").html(total); 

 #total { height: 100px; width: 100px; padding: 15px; color: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td class="app">50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td class="app">94</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td class="app">94</td> </tr> </table> <br /> <div id="total"></div> 

Answer 2

您必須使用html() ：

var total = 0;
$(".app").each(function() {
    total += parseInt($(this).html());
});

$("#total").html(total);

val()方法用於從輸入和選擇之類的表單元素獲取值。 文件