使用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单元格没有任何值属性，并将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()方法用于从输入和选择等表单元素中获取值。 Docs