Skip to main content

Sum from TR with jQuery

Image
By User



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>




Labels

Labels:

Comments

  1. Tips For AllJanuary 19, 2012 at 4:46 AM

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

    ReplyDelete
  2. Tips For AllJanuary 19, 2012 at 4:46 AM

    http://jsfiddle.net/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);
    })

    ReplyDelete
  3. Tips For AllJanuary 19, 2012 at 4:46 AM

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

    ReplyDelete
  4. Tips For AllJanuary 19, 2012 at 4:46 AM

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

    ReplyDelete
  5. Tips For AllJanuary 19, 2012 at 4:46 AM

    Check this fiddle: http://jsfiddle.net/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) );
    }
    }
    }

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more