...

View Full Version : Totaling column and row data with javascript



rubyriot
10-09-2011, 01:12 AM
I cannot figure out how to total my column data correctly with JavaScript. The code I have will enter a new row, but it is not summing the columns. The new row is just filled with zeros.


function totalColumns() {
var tds = document.getElementById('users_table').getElementsByTagName('td');
var sum = 0;
for(var i = 0; i < tds.length; i ++) {
if(tds[i].className == 'dataRow') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('users_table').innerHTML += '<tr><td>' + sum + '</td><td>' +sum+ '</td><td>' +sum + '</td></tr>';
alert ("Columns have been totalled and listed at the bottom of each");
} //end totalColumns


I can't figure out how to get the rows to total at all. Any insight would be appreciated! Thanks!

ironboy
10-09-2011, 02:20 AM
Try:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
table {background:#ddd}
td {font: 18px Tahoma, Geneva, sans-serif;padding:10px;text-align:right}
td.sum {font-weight:bold}
</style>
<title>Fade it</title>
<script type="text/javascript">
/**
* Calculate totals in a table
* el = DOM element or id of dom element,
* cols = calculate column totals if not false
* rows = claculate row totals if not false
*/
var tableTotal = function(el,cols,rows){
typeof el == 'string' && (el = document.getElementById(el));
var i, colTotal = [], rowTotal = [], colCo = 0, val,
rowCo = 0, totTotal = 0, tr, td = el.getElementsByTagName('td');
// calculate
for(i = 0; i < td.length;i++){
tr != td[i].parentNode && (tr = td[i].parentNode) && (rowCo++) && (colCo = 0);
val = td[i].innerHTML / 1 || 0;
colTotal[rowCo-1] = (colTotal[rowCo-1] || 0) + val;
rowTotal[colCo] = (rowTotal[colCo] || 0) + val;
totTotal += val;
colCo++;
};
// render col sums
if(cols !== false){
tr = el.getElementsByTagName('tr');
rowCo = 0;
while(colTotal.length){
td = document.createElement('td');
td.className = 'sum';
td.innerHTML = colTotal.shift();
tr[rowCo].appendChild(td);
rowCo++;
}
};
// render row sums
if(rows !== false){
tr = document.createElement('tr');
el.appendChild(tr);
cols !== false && rowTotal.push(totTotal);
while(rowTotal.length){
td = document.createElement('td');
td.className = 'sum';
td.innerHTML = rowTotal.shift();
tr.appendChild(td)
}
};
};

onload = function(){
tableTotal('users_table')
};
</script>
</head>

<body>
<table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
<tr class="dataRow">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr class="dataRow">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="row3" class="dataRow">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr class="dataRow">
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>

rubyriot
10-09-2011, 02:43 PM
Thank you again! Some slight tweaking and it works. You are most helpful. :thumbsup:

ironboy
10-09-2011, 02:59 PM
Glad it works! :)

Have you noticed that there is a thank you button by my post if you want to improve my statistics? ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum