javascript - Sum from TR with jQuery - Stack Overflow

admin管理员组

文章数量:1415476

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: /

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>

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/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>

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 18, 2012 at 15:05 Paul AttuckPaul Attuck 2,27944 gold badges2323 silver badges2626 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

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 ments, 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;
}

http://jsfiddle/dZLg6/1/

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

var sum = 0;
$(".sum_sub")).each(function(sum) {
sum += parseInt($.trim($(this).html()),10);
  });
alert(sum);

If you group your rows using tbodys

<table>
  <tbody>
    <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>
  </tbody>
  <tbody>
    <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>
  </tbody>
  <tbody>
    <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>
  </tbody>
</table>

then you can easily sum things

$.each(myTable.find('tbody'), function (_, tbody) {
  tbody = $(tbody);
  var sum = 0;
  $.each(tbody.find('.sum_sub'), function (_, sum_sub) {
    sum += +$(sum_sub).text();
  });
  tbody.find('.sum_main').text('' + sum);
});

Check this fiddle: http://jsfiddle/ZmsGS/

Code:

var sumSpan = null;
$('span').each(function() {
    var tr = $(this);
    if(tr.hasClass('sum_main')) sumSpan = tr;
    else if(tr.hasClass('sum_sub')) {
        if(sumSpan != null) {
            sumSpan.text( parseInt(sumSpan.text(), 10) + parseInt(tr.text(), 10) );
        }
    }
}

本文标签： javascriptSum from TR with jQueryStack Overflow