Question

I have for example:

<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()); // ???????

LIVE EXAMPLE: http://jsfiddle.net/dZLg6/

How can sum from class sum_sub and show this in sum_main with jQuery and function for example each?
This example should show me:

<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

You need to iterate over all the .sum_main elements. Inside the loop you can get the text from each of the following .sum_sub elements (until the next .main row) and maintain a running total:

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

Here’s a working example.

Update

As noted in the comments, it may be worth checking that parseInt actually returns a number. If it doesn’t, it will return NaN, and adding that to our total will make the total NaN. We can do this with the isNaN function. Something along these lines:

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