javascript - Calculating column and row sum in html table using jquery selectors

I am trying to calculate the row and column total in an html table. However, I am trying to calculate the row total up to the second to last column. I can do it up to last column but not up to second to last. I also want to remove Total:0 from the first column. Can you please help me, below is my code:

<table id="sum_table" width="300" border="1">
        <tr class="titlerow">
            <td></td>
            <td>Apple</td>
            <td>Orange</td>
            <td>Watermelon</td>
            <td>Total By Row</td>
            <td>Strawberry</td>            
        </tr>
        <tr>
            <td> Row1</td>
            <td class="rowAA">1</td>
            <td class="rowAA">2</td>
            <td class="rowBB">3</td>
            <td class="totalRow"></td>
            <td class="rowBB">4</td>

        </tr>
        <tr>
            <td> Row2</td>
            <td class="rowAA">1</td>
            <td class="rowAA">2</td>
            <td class="rowBB">3</td>
            <td class="totalRow"></td>
            <td class="rowBB">4</td>

        </tr>
        <tr>
            <td>Row3</td>
            <td class="rowAA">1</td>
            <td class="rowAA">5</td>
            <td class="rowBB">3</td>
            <td class="totalRow"></td>
            <td class="rowBB">4</td>
        </tr>
        <tr class="totalColumn">
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
        </tr>
</table>

JS:

$("#sum_table tr:not(:first,:last)  td:nth-last-child(2)").text(function(){
    var t = 0;
    $(this).prevAll().each(function(){ 
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return t;
});

$("#sum_table tr:last td").text(function(i){
    var t = 0;
    $(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return "Total: " + t;
});

JSFiddle

I want the table to look like this format :

     |Apples|Oranges|Watermelon|TotalRow|Strawberry|
Row1 |
Row2 |
Row3 |
Total|

<table id="sum_table" width="300" border="1">
        <tr class="titlerow">
            <td></td>
            <td>Apple</td>
            <td>Orange</td>
            <td>Watermelon</td>
            <td>Total By Row</td>
            <td>Strawberry</td>            
        </tr>
        <tr>
            <td> Row1</td>
            <td class="rowAA">1</td>
            <td class="rowAA">2</td>
            <td class="rowBB">3</td>
            <td class="totalRow"></td>
            <td class="rowBB">4</td>

        </tr>
        <tr>
            <td> Row2</td>
            <td class="rowAA">1</td>
            <td class="rowAA">2</td>
            <td class="rowBB">3</td>
            <td class="totalRow"></td>
            <td class="rowBB">4</td>

        </tr>
        <tr>
            <td>Row3</td>
            <td class="rowAA">1</td>
            <td class="rowAA">5</td>
            <td class="rowBB">3</td>
            <td class="totalRow"></td>
            <td class="rowBB">4</td>
        </tr>
        <tr class="totalColumn">
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
            <td class="totalCol"></td>
        </tr>
</table>

JS:

$("#sum_table tr:not(:first,:last)  td:nth-last-child(2)").text(function(){
    var t = 0;
    $(this).prevAll().each(function(){ 
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return t;
});

$("#sum_table tr:last td").text(function(i){
    var t = 0;
    $(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return "Total: " + t;
});

JSFiddle

I want the table to look like this format :

     |Apples|Oranges|Watermelon|TotalRow|Strawberry|
Row1 |
Row2 |
Row3 |
Total|

Share edited Jan 10, 2014 at 13:57 asked Jan 10, 2014 at 10:22 ivan 6633 gold badges8 silver badges23 bronze badges

anyone? i am pulling an all nighter and this is for a project that i have to present today – ivan Commented Jan 10, 2014 at 10:45
possible duplicate of SUM Total for Column – Ravimallya Commented Jan 10, 2014 at 10:54
i have seen this, nonetheless its a different situation – ivan Commented Jan 10, 2014 at 10:58
So if I understand correctly, you want to get rid of the "Total: 33" in the bottom-right cell and the "Total: 0" in the bottom-left cell? – Frolin Ocariza Commented Jan 10, 2014 at 11:13
I want to get rid of total:0 but i need total row to be shifted to the left by 1 and strawbery column to be the last column. I dont want stawbery column to be a part of total row. Strawberry column should only have column total – ivan Commented Jan 10, 2014 at 13:15

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

If you want to prevent the bottom-left and bottom-right cells in the table from displaying the total (at least this is how I understand your question), you'll have to change your selector from #sum_table tr:last td to #sum_table tr:last td:not(:first,:last). And then, to account for the shift in indices (since the td element in column 1 has been excluded), you'll have to change ++i to i+2. Here's an updated version of the second part of your JS code (JSFiddle):

$("#sum_table tr:last td:not(:first,:last)").text(function(i){
    var t = 0;
    $(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return "Total: " + t;
});

Edit: Based on the update you made, is this perhaps more in line with what you're after? This solution basically modifies the HTML code by switching the second-last and last td's in each tr (i.e., in each row), and the first CSS selector in the JS code was modified to #sum_table tr:not(:first,:last) td:nth-child(5) so that the "Total" gets displayed in the second last column (i.e., the 5th td of each applicable row).

If, for whatever reason, you want the HTML code to stay as is and you'd like to implement a purely-JS solution that doesn't involve modifying the HTML code by hand, you can do something like the following (JSFiddle):

//Swap the second-last and last columns
$("#sum_table tr td:last-child").each(function(){
    var lastRowContent = $(this)[0].innerHTML;
    var secondLastRowContent = $(this).parent().find("td:nth-child(5)")[0].innerHTML;
    $(this).parent().find("td:nth-child(5)")[0].innerHTML = lastRowContent;
    $(this)[0].innerHTML = secondLastRowContent;
});

$("#sum_table tr:not(:first,:last)  td:nth-child(5)").text(function(){
    var t = 0;
    $(this).prevAll().each(function(){ 
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return t;
});

$("#sum_table tr:last td:not(:first)").text(function(i){
    var t = 0;
    $(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return "Total: " + t;
});

This is basically the same as the first solution presented above in this edit, except the second-last and last columns are swapped programmatically using jQuery (instead of being manually swapped by hand).

Is this what you are looking for? http://jsfiddle/unKDk/335/

I changed this

$("#sum_table tr:last")

$("#sum_table tr:last td:not(:first,:last)")

and

$(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){

$(this).parent().prevAll().find("td:nth-child("+(i + 2)+")").each(function(){

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Calculating column and row sum in html table using jquery selectors - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)