?
Solved

Sum the Numbers in an HTML Table Column

Posted on 2007-03-20
13
Medium Priority
?
1,947 Views
Last Modified: 2008-01-09
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?
    Thanks in advance.
     
0
Comment
Question by:Randall-B
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
  • 2
13 Comments
 
LVL 14

Expert Comment

by:Vel Eous
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

by:NicksonKoh
NicksonKoh earned 800 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 height="51">Header1</td>
    <td height="51">Header2</td>
    <td height="51">Header3</td>
    <td height="51">Header4</td>
    <td>Header5</td>
    <td>Header6</td>
    <td>Header7</td>
    <td>Header8</td>
    <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

by:Randall-B
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 14

Expert Comment

by:Vel Eous
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">
<head>
<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>
</head>

<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

by:Randall-B
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

by:Randall-B
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

by:Vel Eous
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

by:
Vel Eous earned 1200 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">
<head>
<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>
</head>

<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

by:Randall-B
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

by:Randall-B
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

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

Author Comment

by:Randall-B
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

by:NicksonKoh
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

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

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

Join & Ask a Question