Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
7
rated 0 times [  8] [ 1]  / answers: 1 / hits: 18793  / 11 Years ago, fri, january 10, 2014, 12:00:00

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|

More From » jquery

 Answers
142

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).


[#73262] Thursday, January 9, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
beatrizrheaq

Total Points: 73
Total Questions: 89
Total Answers: 107

Location: Jersey
Member since Fri, Oct 1, 2021
3 Years ago
;