Solved

# Sum the Numbers in an HTML Table Column

Posted on 2007-03-20
1,502 Views
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?

0
Question by:Randall-B
• 7
• 4
• 2

LVL 14

Expert Comment

ID: 18761103
<script>
function calcSum(){
// i = columns
for (i=0;i<3;i++){
sum=0
// j = rows down
// change j=0; to j=1; to skip top row
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;
0

LVL 17

Assisted Solution

NicksonKoh earned 200 total points
ID: 18762322
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
0

Author Comment

ID: 18762960
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.
0

LVL 14

Expert Comment

ID: 18762989
<!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
// change j=0; to j=1; to skip top row
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 ?
0

Author Comment

ID: 18763006
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.
0

Author Comment

ID: 18763028
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?
0

LVL 14

Expert Comment

ID: 18763039
<script>
function calcSum(){
// i = columns
// just sum col 6
for (i=5;i<6;i++){
sum=0
// j = rows down
// change j=0; to j=1; to skip top row
// 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>
0

LVL 14

Accepted Solution

Tchuki earned 300 total points
ID: 18763100
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
// change j=0; to j=1; to skip top row
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>
0

Author Comment

ID: 18763169
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.
So I adjusted your function like this:

function calcSum(){
// i = columns
// just sum col 6
for (i=5;i<6;i++){
sum=0
// j = rows down
// changed j=0; to j=1; to skip top row
// 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?
0

Author Comment

ID: 18763377
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>
0

Author Comment

ID: 18763404
By the way, how would I get the average instead of the sum?
0

Author Comment

ID: 18764237
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.
0

LVL 17

Expert Comment

ID: 18768463
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
0

## Join & Write a Comment Already a member? Login.

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be \$37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

#### 746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

#### Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!