# Sum the Numbers in an HTML Table Column

The answer at http:Q_21001288.html shows a very simple way to sum the numbers in an HTML table row, and display the sum of each row in the right-most column.
1)  What minor modification would make that JS sum the columns, instead; so it would show *column* totals in the bollom row---instead of *row* totals in the right column? (By the way, my table has a header row, so this will need to work around it.)
2) What if I don't need *each* column of the table to display an average? My table has 8 columns, and I want to show the sum only under the sixth. How can this be modified to add only to the sixth column from the left?

###### Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Research & Development ManagerCommented:
<script>
function calcSum(){
// i = columns
for (i=0;i<3;i++){
sum=0
// j = rows down
for (j=0;j<3;j++)
sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML
document.getElementById("numTable").rows[j].cells[i].innerHTML=sum
}
}
</script>

If you only need the top 6 results, then there is no point having the final 2 rows in which case remove the completly and set j<3; to j<6;
Commented:
Hi,

I modified the script to show both row and column totals.

<script>
function calcSum(){
for (i=1;i<7;i++){
sum=0
for (j=0;j<7;j++) sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML;
document.getElementById("numTable").rows[i].cells[8].innerHTML=sum
}

for (j=0;j<8;j++){
sum=0
for (i=1;i<7;i++) sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML;
document.getElementById("numTable").rows[7].cells[j].innerHTML=sum
}

}
</script>
<body>
<table border="1" width="290" height="428" id="numTable">
<tr>
<td>Total</td>
</tr>
<tr>
<td width="72" height="51">1</td>
<td width="72" height="51">3</td>
<td width="73" height="51">1</td>
<td width="73" height="51">1</td>
<td width="73">3</td>
<td width="73">4</td>
<td width="73">5</td>
<td width="73">5</td>
<td width="73">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">3</td>
<td width="72" height="51">4</td>
<td width="73" height="51">6</td>
<td width="73" height="51">2</td>
<td width="73">7</td>
<td width="73">6</td>
<td width="73">6</td>
<td width="73">6</td>
<td width="73">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">8</td>
<td width="72" height="51">9</td>
<td width="73" height="51">2</td>
<td width="73" height="51">3</td>
<td width="73">7</td>
<td width="73">7</td>
<td width="73">1</td>
<td width="73">7</td>
<td width="73">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">7</td>
<td width="72" height="51">8</td>
<td width="73" height="51">5</td>
<td width="73" height="51">4</td>
<td width="73">8</td>
<td width="73">1</td>
<td width="73">1</td>
<td width="73">1</td>
<td width="73">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">1</td>
<td width="72" height="51">3</td>
<td width="73" height="51">1</td>
<td width="73" height="51">5</td>
<td width="73">8</td>
<td width="73">1</td>
<td width="73">1</td>
<td width="73">1</td>
<td width="73">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">2</td>
<td width="72" height="51">2</td>
<td width="73" height="51">2</td>
<td width="73" height="51">6</td>
<td width="73">7</td>
<td width="73">4</td>
<td width="73">3</td>
<td width="73">2</td>
<td width="73">&nbsp;</td>
</tr>
<tr>
<td height="51">&nbsp;</td>
<td height="51">&nbsp;</td>
<td height="51">&nbsp;</td>
<td height="51">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<input type="button" value="sums" onClick="calcSum()">
</p>
</body>

Cheers
Nickson
Author Commented:
Tchuki,
For some reason I was not able to get your solution to work, so I'm going with Nickson's so far. I was also looking for help on part 2 of the question: how to show a sum only under the 6th column, instead of under every column.  Thanks.
Research & Development ManagerCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function calcSum(){
// i = columns
for (i=0;i<3;i++){
sum=0
// j = rows down
for (j=0;j<3;j++)
sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML
document.getElementById("numTable").rows[j].cells[i].innerHTML=sum
}
}
</script>

<body>
<table border="1" width="290" height="306" id="numTable">
<tr>
<td width="72" height="51">1</td>

<td width="72" height="51">3</td>
<td width="73" height="51">1</td>
<td width="73" height="51">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">3</td>
<td width="72" height="51">4</td>

<td width="73" height="51">6</td>
<td width="73" height="51">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">1</td>
<td width="72" height="51">6</td>
<td width="73" height="51">7</td>

<td width="73" height="51">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">&nbsp;</td>
<td width="72" height="51">&nbsp;</td>
<td width="73" height="51">&nbsp;</td>
<td width="73" height="51">&nbsp;</td>
</tr>
<tr>

<td width="72" height="51">&nbsp;</td>
<td width="72" height="51">&nbsp;</td>
<td width="73" height="51">&nbsp;</td>
<td width="73" height="51">&nbsp;</td>
</tr>
<tr>
<td width="72" height="51">&nbsp;</td>
<td width="72" height="51">&nbsp;</td>
<td width="73" height="51">&nbsp;</td>

<td width="73" height="51">&nbsp;</td>
</tr>
</table>

<input type="button" value="col sums" onclick="calcSum()">
</body>
</html>

^^ works fine for me.

>> how to show a sum only under the 6th column, instead of under every column.

The code above sums all the columns up to row 3 then places the total in row 4.  If you just want an answer in row 6 then change:

for (j=0;j<3;j++)

to

for (j=0;j<6;j++)

Or an I missing the point here ?
Author Commented:
NicksonKoh,
Thanks. That works great. And it's easy to modify by commenting out the first "for . . ." loop, which adds row totals, so now it shows only column totals, at the bottom.
How about the 2nd part of the question: What if I don't need a sum under *each* column? How can this be modified to show the sum only under column 6?  Instead of this, for example,

1    2    3    4    5    6    7    8
3    1    2    4    2    0    2    0
-----------------------------------
Sums:  4    3    5     8   7    6    9    8

what I actually need is this (adding up and showing a sum only the 6th column):

1    2    3    4    5    6    7    8
3    1    2    4    2    0    2    0
-----------------------------------
Sum:                                 6

Is that possible?  Thanks.
Author Commented:
Tchuki,
Thanks. Maybe the problem is, my table has about 12 rows and 8 columns.  It is more like the html table code that NicksonKoh is using. It would be necessary to extend your code to handle 8 columns and more rows.  Maybe the illustration above will explain things better:  I have 8 columns, but I don't want to show a sum under each column.  I only want a sum under column 6.  Is that possible?
Research & Development ManagerCommented:
<script>
function calcSum(){
// i = columns
// just sum col 6
for (i=5;i<6;i++){
sum=0
// j = rows down
// work down 12 rows
for (j=0;j<12;j++)
sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML
document.getElementById("numTable").rows[j].cells[i].innerHTML=sum
}
}
</script>
Research & Development ManagerCommented:
for example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function calcSum(){
// i = columns
for (i=5;i<6;i++){
sum=0
// j = rows down
for (j=0;j<8;j++)
sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML
document.getElementById("numTable").rows[j].cells[i].innerHTML=sum
}
}
</script>

<body>
<table border="1" width="290" height="481" id="numTable">
<tr>
<td width="72" height="51">1</td>
<td width="72" height="51">3</td>
<td width="73" height="51">1</td>
<td width="73" height="51">5</td>
<td width="73">6</td>
<td width="73">8</td>
<td width="73">5</td>
<td width="73">4</td>
</tr>
<tr>
<td width="72" height="51">3</td>
<td width="72" height="51">4</td>
<td width="73" height="51">6</td>
<td width="73" height="51">9</td>
<td width="73">7</td>
<td width="73">4</td>
<td width="73">8</td>
<td width="73">4</td>
</tr>
<tr>
<td width="72" height="51">1</td>
<td width="72" height="51">6</td>
<td width="73" height="51">7</td>
<td width="73" height="51">7</td>
<td width="73">5</td>
<td width="73">9</td>
<td width="73">6</td>
<td width="73">5</td>
</tr>
<tr>
<td width="72" height="51">4</td>
<td width="72" height="51">3</td>
<td width="73" height="51">8</td>
<td width="73" height="51">6</td>
<td width="73">7</td>
<td width="73">5</td>
<td width="73">6</td>
<td width="73">9</td>
</tr>
<tr>
<td width="72" height="51">8</td>
<td width="72" height="51">6</td>
<td width="73" height="51">8</td>
<td width="73" height="51">7</td>
<td width="73">6</td>
<td width="73">9</td>
<td width="73">0</td>
<td width="73">9</td>
</tr>
<tr>
<td width="72" height="51">0</td>
<td width="72" height="51">8</td>
<td width="73" height="51">8</td>
<td width="73" height="51">3</td>
<td width="73">6</td>
<td width="73">5</td>
<td width="73">7</td>
<td width="73">4</td>
</tr>
<tr>
<td height="51">9</td>
<td height="51">7</td>
<td height="51">5</td>
<td height="51">8</td>
<td>9</td>
<td>7</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td height="51">4</td>
<td height="51">6</td>
<td height="51">5</td>
<td height="51">7</td>
<td>8</td>
<td>7</td>
<td>9</td>
<td>0</td>
</tr>
<tr>
<td height="51">&nbsp;</td>
<td height="51">&nbsp;</td>
<td height="51">&nbsp;</td>
<td height="51">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

<input type="button" value="col sums" onclick="calcSum()">
</body>
</html>

Experts Exchange Solution brought to you by

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Author Commented:
Tchuki,
OK, that's going in the right direction: now it shows a sum only under the 6th column. But it is not the correct mathmatical sum.
Here's how I'm testing: Although my real table has about 12 rows, plus a header row at the top, I'm currently testing with the example table in Nickson's answer above:  it has a header row, then 6 rows under that, then a blank row at the bottom (where the sum is displayed).  And it has 8 columns.

function calcSum(){
// i = columns
// just sum col 6
for (i=5;i<6;i++){
sum=0
// j = rows down
// work down 7 rows
for (j=1;j<7j++)
sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML
document.getElementById("numTable").rows[j].cells[i].innerHTML=sum
}
}

But that gives a sum of 19 under the 6th column, where the sum should be 22 or 23.  How should I adjust the function?
Author Commented:
I think the problem was in this:
.rows[j].cells[i]
It should be:
.rows[i].cells[j]

So, drawing upon the answers of both NicksonKoh and Tchuki, here is the complete working script, which sums the 6th column (with 12 data rows, after bypassing the header row), and displays the sum below the 6th column, even though the table has 8 columns:

<script>
function calcSum(){
for (j=5;j<6;j++){
sum=0
for (i=1;i<13;i++) sum+=1*document.getElementById("numTable").rows[i].cells[j].innerHTML;
document.getElementById("numTable").rows[i].cells[j].innerHTML=sum
}
}
</script>
Author Commented:
By the way, how would I get the average instead of the sum?
Author Commented:
I'm opening a new question about how to calculate the average instead of the sum, at:
http:/Q_22463207.html , if you would like to participate. Thanks.
Commented:
Argh... sometimes I just read clearly enough :p. Sorry abt missing out on the avg but I see u got help great help from the other experts!

cheers
###### It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.