How to calculating column and row sum in html table using jquery

Question

I want to calculate the total of rows and columns in HTML Table using jquery I tried but the total column is not calculating can anybody help me.Below is my code:

<script>
    $(function(){
        $('.txtfld').bind({
            keyup:function(){ 
         //total calculation
                    $(".printer-type tr:not(:first, last) td:last-child").text(function () {
                        var totalVal = 0;
                        $(this).prevAll().each(function () {
                            totalVal += parseInt($(this).children('.txtfld').val()) || 0;
                            //totalVal += parseInt( );
                        });
                        return totalVal;
                    });

                    $(".printer-type tr:last td").text(function (i) {
                        var totalVal = 0;
                        $(this).parent().prevAll().find("td:nth-child(" + (++i) + ")").each(function () {
                            totalVal += parseInt($(this).children('.txtfld').val()) || 0;
                            $(".printer-type tr:last td:first").text('Total sheets/year');
                        });
                        return totalVal;

                    });
                    //Total calculation
            }
        });


    });


</script>

<div class="printer-type">
<table width="580" border="0" class="printer-row">
  <tr>
    <td>&nbsp;</td>
    <td>8X10 in</td>
    <td>10X12 in</td>
    <td>8X10 in Memmo</td>
    <td>10X12 in Memmo</td>
    <td>11X14 in</td>
    <td>14X14 in</td>
    <td>14X17 in</td>
    <td>Total sheets/year</td>
  </tr>
  <tr>
    <td>Item 5700</td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Item 5700</td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>FUJI DRYPIX 400</td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>AGFA Drystar 3000</td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td><input type="text" class="txtfld" placeholder="edit"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Total sheets/year</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>

The above is my code to adding the rows and columns total Please anybody fix this bug. The "Total sheets/year" column total is not effecting. JSFIDDLE

jsfiddle.net/34eKe This code works fine. Check your console and jQuery version. — Mateusz Nowak
– Mateusz Nowak, Commented Apr 27, 2014 at 10:26
The only problem is the "Total sheets/year" column total in not getting effected. — Arnold
– Arnold, Commented Apr 27, 2014 at 10:38
If you see clearly i need to calculate the Total sheet column the total is not changing its remain "0" only jsfiddle.net/mystudies/9UW4y/1 — Arnold
– Arnold, Commented Apr 27, 2014 at 10:51

Devima · Accepted Answer · 2014-04-27 13:15:32Z

2

if you want the total in the right bottom cell check this
Fiddle i add this code to your jquery code

            var count=0
            for(i=1;i<$('tr').length;i++){
                var trs=parseInt($('tr:eq('+i+')').find('td:last').text())
                count+=trs
            }
            $(".printer-type tr:last td:last").text(count)

If this solution does not suit your needs, i apologize for making you lose time.

answered Apr 27, 2014 at 13:15

Devima

1,5662 gold badges10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to calculating column and row sum in html table using jquery

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related