javascript - 使用 jQuery 从 TR 求和

Question

我有例如:

<table>
    <tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">6</span></td></tr>
    <tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
    <tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">8</span></td></tr>
</table>


table td {
   border: solid 1px black;
   padding: 4px;
}

.main {
background-color: #cc99ff;
}


$(".sum_main").val( $(".sum_main").val() + $(".sum_main").val() + $(".sum_main").val()); // ???????

实例: http://jsfiddle.net/dZLg6/

如何从类 sum_sub 求和并在 sum_main 中用 jQuery 和函数显示它？ 这个例子应该告诉我:

<table>
    <tr class="main"><td>test | sum:<span class="sum_main">13</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">6</span></td></tr>
    <tr class="main"><td>test | sum:<span class="sum_main">7</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
    <tr class="main"><td>test | sum:<span class="sum_main">20</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">8</span></td></tr>
</table>

Answer 1

您需要遍历所有 .sum_main 元素。在循环内，您可以从以下每个 .sum_sub 元素(直到下一个 .main 行)获取文本并维护一个运行总计:

$(".sum_main").each(function() {
    var total = 0;
    $(this).closest("tr").nextUntil(".main").each(function() {
        total += parseInt($(this).find(".sum_sub").text(), 10);
    });
    $(this).text(total); 
});

这是一个 working example .

更新

如评论中所述，可能值得检查 parseInt 是否实际返回了一个数字。如果不是，它将返回 NaN，并将其添加到我们的总数中将得到总的 NaN。我们可以用 isNaN 来做到这一点功能。沿着这些线的东西:

var num = parseInt($(this).find(".sum_sub").text(), 10);
if(!isNaN(num)) {
    total += num;
}