Sum total for column in jQuery

javascript, jquery

Solution

Here is a jsffile. hope this helps

  <table id="sum_table" width="300" border="1">
        <tr class="titlerow">
            <td>Apple</td>
            <td>Orange</td>
            <td>Watermelon</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">5</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr class="totalColumn">
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
        </tr>
    </table> 
<script>
       var totals=[0,0,0];
        $(document).ready(function(){

            var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");

            $dataRows.each(function() {
                $(this).find('.rowDataSd').each(function(i){        
                    totals[i]+=parseInt( $(this).html());
                });
            });
            $("#sum_table td.totalCol").each(function(i){  
                $(this).html("total:"+totals[i]);
            });

        });
</script>

Problem

The following code isn't working. I need to sum all by column as you can see on jsfiddle. What's going wrong? HTML ``` <table id="sum_table" width="300" border="1"> <tr> <td>Apple</td> <td>Orange</td> <td>Watermelon</td> </tr> <tr> <td class="rowDataSd">1</td> <td class="rowDataSd">2</td> <td class="rowDataSd">3</td> </tr> <tr> <td class="rowDataSd">1</td> <td class="rowDataSd">2</td> <td class="rowDataSd">3</td> </tr> <tr> <td class="rowDataSd">1</td> <td class="rowDataSd">2</td> <td class="rowDataSd">3</td> </tr> <tr class="totalColumn"> <td class="totalCol">Total:</td> <td class="totalCol">Total:</td> <td class="totalCol">Total:</td> </tr> </table> ``` Javascript ``` $(document).ready(function(){ $(".rowDataSd").each(function() { newSum.call(this); }); }); function newSum() { var $table = $(this).closest('table'); var total = 0; $(this).attr('class').match(/(\d+)/)[1]; $table.find('tr:not(.totalColumn) .rowDataSd').each(function() { total += parseInt($(this).html()); }); $table.find('.totalColumn td:nth-child('')').html(total); } ```

Original source