来自TR与jQuery的总和

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

这是一个有效的例子.

更新

如评论中所述,可能值得检查parseInt实际返回一个数字.如果没有,它将返回NaN,并将其添加到我们的总数将使总数NaN.我们可以用这个isNaN功能做到这一点.这些方面的东西:

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