101,
The solution depends on why you need to do this?
If you build your table manually, then do the summation manually and type in the HTML for the totals row manually, complete with its values.
If your HTML is pasted from a spreadsheed, then get the spreadsheet to do the totals and paste in the total rows along with the other rows.
If you build the table dynamically, either server-side or client-side, then get the build script to do the summation and write the totals row as per the other rows.
If the values in the table occur in response to some sort of user interaction(s), then OK, use JavaScript to scan the table and write in the totals but that would require the calculation script to be triggered by the user event(s) in question (data entry/button press or whatever) rather than using a "one-off" script embedded in the HTML. Write the code as a javascript function and call it from event handler(s) as appropriate.
Also (from solution above), my IE6 (maybe other browsers) doesn't like document.getElementById('countit').innerHTML += '.....'; . It may work in Moz/Opera, I haven't tested. For me, it's better to add <tr><td id="total_1"></td><td id="total_2"></td></tr> to the bottom of the table (manually if that's how you write your HTML), then populate it from the calculation function. eg something like:
document.getElementById('total_1').innerHTML = sum1;
document.getElementById('total_2').innerHTML = sum2;
This has the added advantage of allowing reuse; the function can be called more than once (per page-session) without adding a growing number total rows to the table, which is important if the purpose of all this is to respond to user events (in the plural).
Apart from that, and with my proviso about reuse, Fungus' script will work if a one-off, in-line calculation is what's required.
Hope this helps
Airshow
Airshow
WiFi Lounge Lizard
2,678 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
<script>
function totalTable() {
var arr = document.getElementsByTagName("TD");
var count1 = 0;
var count2 = 0;
for (a = 0; a < arr.length; a++){
var mytd = arr[a].innerHTML;
if (isNumeric(mytd, false) == true) {
if (arr[a].className == "column1"){
count1 = count1 + parseInt(mytd);
} else {
count2 = count2 + parseInt(mytd);
}
}
}
document.getElementById("total1").innerHTML = "SUM OF THIS COLUMN (" + count1 + ")";
document.getElementById("total2").innerHTML = "SUM OF THIS COLUMN (" + count2 + ")";
//alert(count1 + " " + count2);
}
function isNumeric(sText, decimalAllowed) {
if (sText.length == 0) return false;
var validChars = "";
if (decimalAllowed) {
validChars = "0123456789.";
} else {
validChars = "0123456789";
}
var isNumber = true;
var charA;
var decimalCount = 0;
for (i = 0; i < sText.length && isNumber == true && decimalCount < 2; i++) {
charA = sText.charAt(i);
if (charA == ".") {
decimalCount += 1;
}
if (validChars.indexOf(charA) == -1) {
isNumber = false;
}
}
return isNumber;
}
window.onload = totalTable;
</script>
harrierdh
Junior Poster in Training
62 posts since Dec 2009
Reputation Points: 10
Solved Threads: 13
Can you provide a little more info. Do a view source and put that in between [code] tags. Or print screen or link or something. It is hard to visualize what your table looks like with real data. What you are trying to do is completely possible with or without being able to modify id's or name's.
harrierdh
Junior Poster in Training
62 posts since Dec 2009
Reputation Points: 10
Solved Threads: 13
