Solved

# Get Average of Numbers in a Column of HTML Table

Posted on 2007-03-21
247 Views
This simple javascript calculates and displays the sum total of the 6th column in a table (which happens to have a header, then 12 rows of data, then a blank row at the bottom, where the sum of column 6 is displayed):

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

Instead of showing the sum of Column 6, however, I would like to show the mean average.  How would I modify the script to do that?
0
Question by:Randall-B
• 6
• 4
• 2
• +1

LVL 14

Expert Comment

ID: 18764277
<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/j // <------------
}
}
</script>
0

LVL 49

Expert Comment

ID: 18764404
Shouldn't you need to divide by j*i?

document.getElementById("numTable").rows[i].cells[j].innerHTML
= Math.round(sum/(j*i), 2)

-r-
0

Author Comment

ID: 18764415
Tchuki,
Thanks, but dividing by j gives the wrong math average. For example, if each cell in the column has a "2" in it, the average should be 2.  But this modification gave an average of 4.8 .  Also, what if a cell is blank or simply has &nbsp; ? Then it gives an error of NaN.  How can I avoid that?
0

LVL 49

Assisted Solution

Roonaan earned 250 total points
ID: 18764435
<script>
function calcSum(){
for (j=5;j<6;j++){
sum= 0;
ints =0;
for (i=1;i<13;i++) {
var value = 1*document.getElementById("numTable").rows[i].cells[j].innerHTML;
if(!isNaN(value)) { ints++; sum += value;}
}
document.getElementById("numTable").rows[i].cells[j].innerHTML
= ints > 0 ? sum : 0;
}
}
</script>

-r-
0

LVL 14

Expert Comment

ID: 18764474
Back to school for me ...  >.<
0

Author Comment

ID: 18764528
It seems to work if I divide by (i-1). I think that is because  i  is the number of data rows plus footer row.  Subtracting 1 gives number of data rows only. So this seems to work:
. . .     .innerHTML=sum/(i-1)
I tried to put Roonaan's rounding feature into it, also, like this:
. . .     .innerHTML=Math.round(sum/(i-1), 2)
but it is rounding to 1 digit, when I actually want two decimal places.  For example, it is rounding to 3 when the average is 2.77829102934 .  How can I round to 2.78 , instead?

0

Author Comment

ID: 18764601
Roonan,
Your script appears to add up a sum, instead of calculating an average.  But it works great for ignoring empty cells to avoid the NaN error.
How would keep that great feature of working around empty cells, but calculate the average instead of the sum?  (And round to 2 decimal places)?  Based on my prior post, I think it has something to do with (i-1), but that would not account for empty cells, which would make the average come out wrong.  Thanks.
0

LVL 49

Expert Comment

ID: 18764646
Yeah sorry, I was mixed up with other things. Please change:
= ints > 0 ? sum : 0;
To
= ints > 0 ? Math.round(sum/ints, 2) : 0;
0

Author Comment

ID: 18764709
Roonaan,
Good, that gives the average, but it is still rounding to an single digit (integer) instead of two decimal places.  For example, it rounded 2.346 to simply 3.  But I would like it to round to 2.35 .  How?
0

LVL 49

Accepted Solution

Roonaan earned 250 total points
ID: 18764777
Then it might be possible that Round does not accept the ,2 argument.

Lets try:

= ints > 0 ? (Math.round(100*sum/ints, 2) / 100) : 0;

Regards

-r-
0

Author Comment

ID: 18764952
Yes, that works.  So the complete script is:

<script>
function calcSum(){
for (j=5;j<6;j++){
sum= 0;
ints =0;
for (i=1;i<13;i++) {
var value = 1*document.getElementById("numTable").rows[i].cells[j].innerHTML;
if(!isNaN(value)) { ints++; sum += value;}
}
document.getElementById("numTable").rows[i].cells[j].innerHTML = ints > 0 ? (Math.round(100*sum/ints, 2) / 100) : 0;

}
}
</script>

Thanks!
0

LVL 75

Expert Comment

ID: 18765959
or just

(sum/ints).toFixed(2)
0

Author Comment

ID: 18766596
mplungjan:  Thanks. I also appreciate how that code makes it have 2 decimal places even if it would otherwise be a single digit.
0

## Featured Post

Question has a verified solution.

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

### Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…