Menu
hi this is my first post here ?
i have php-ed some database data into very simple html tables, ordered by date, and wish to calculate (with javascript?!) subtotals for each day, e.g.
[FONT=”Courier New”]
date | number | subtotal
2007-08-01 | 10 | 10
2007-08-01 | 15 | 25
2007-08-01 | 2 | 27
2007-08-02 | 8 | 8
2007-08-02 | 9 | 17[/FONT]
can anyone help me start – i have no idea where to begin ?
many many thanks,
matt!
[CODE]<!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" xml:lang="en" lang="en">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function CalTotals(id){
var table=document.getElementById(id);
var rows=table.getElementsByTagName('TR');
var total=0;
for (var zxc0=0;zxc0<rows.length;zxc0++){
var cols=rows[zxc0].getElementsByTagName('TD');
if (cols[1].firstChild.nodeType==3&&parseInt(cols[1].firstChild.data)){
total+=parseInt(cols[1].firstChild.data);
cols[2].appendChild(document.createTextNode(total));
}
}
}
/*]]>*/
</script></head>
<body>
<table id="tst" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="100">Date</td>
<td width="100">Number</td>
<td width="100">Total</td>
</tr>
<tr>
<td> </td>
<td>10</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>7</td>
<td> </td>
</tr>
</table>
<input type="button" name="" value="Cal Totals" onclick="CalTotals('tst')" /></body>
</html>[/CODE]/**
* @class window
*
* @function sumTableColumn
* Sums all the numbers in one column with the given header name.
*
* @param tNode (string or object, required)
* Id of a TABLE, TBODY, THEAD or TFOOT tag, or a node reference to one
* of those tags.
*
* @param headerName (string, required)
* The Id of a TH tag in the table to which certain cells are bound.
* This value should be found in the headers="" attribute of the cells.
*
* @param outputSumNode (string or object, optional)
* Id or node reference to an HTML tag that should display the sum.
*
* @return number
* The sum of the given column.
*/
function sumTableColumn(tNode, headerName, ouputSumNode) {
var rowsEnd = currentRow = sum = currentCell = cellsEnd = 0;
var row, cell;
if (typeof(tNode) === 'string') {
tNode = document.getElementById(tNode);
}
if (typeof(outputSumNode) === 'string') {
outputSumNode = document.getElementById(outputSumNode);
} else if (typeof(outputSumNode) !== 'object') {
outputSumNode = false;
}
rowsEnd = tNode.rows.length
for (currentRow; currentRow < rowsEnd; currentRow++) {
row = tNode.rows[currentRow];
cellsEnd = row.cells.length;
for (currentCell = 0; currentCell < cellsEnd; currentCell++) {
cell = row.cells[currentCell];
if (cell.headers.indexOf(headerName) > -1) {
sum += parseFloat(cell.innerHTML);
}
}
}
if (outputSumNode) {
outputSumNode.innerHTML = sum;
}
return sum;
}[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!-- begin hiding
/**
* @class window
*
* @function sumTableColumn
* Sums all the numbers in one column with the given header name.
*
* @param tNode (string or object, required)
* Id of a TABLE, TBODY, THEAD or TFOOT tag, or a node reference to one
* of those tags.
*
* @param headerName (string, required)
* The Id of a TH tag in the table to which certain cells are bound.
* This value should be found in the headers="" attribute of the cells.
*
* @param outputSumNode (string or object, optional)
* Id or node reference to an HTML tag that should display the sum.
*
* @return number
* The sum of the given column.
*/
function sumTableColumn(tNode, headerName, ouputSumNode) {
var rowsEnd = currentRow = sum = currentCell = cellsEnd = 0;
var row, cell;
if (typeof(tNode) === 'string') {
tNode = document.getElementById(tNode);
}
if (typeof(outputSumNode) === 'string') {
outputSumNode = document.getElementById(outputSumNode);
} else if (typeof(outputSumNode) !== 'object') {
outputSumNode = false;
}
rowsEnd = tNode.rows.length
for (currentRow; currentRow < rowsEnd; currentRow++) {
row = tNode.rows[currentRow];
cellsEnd = row.cells.length;
for (currentCell = 0; currentCell < cellsEnd; currentCell++) {
cell = row.cells[currentCell];
if (cell.headers.indexOf(headerName) > -1) {
sum += parseFloat(cell.innerHTML);
}
}
}
if (outputSumNode) {
outputSumNode.innerHTML = sum;
}
return sum;
}
window.onload = function() {
alert(sumTableColumn('mytable','th_numbers'));
};
// end hiding -->
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="mytable">
<thead>
<tr>
<th id="th_letters">Letters</th>
<th id="th_numbers">Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th_letters">a</td>
<td headers="th_numbers">10</td>
</tr>
<tr>
<td headers="th_letters">b</td>
<td headers="th_numbers">3</td>
</tr>
<tr>
<td headers="th_letters">r</td>
<td headers="th_numbers">15</td>
</tr>
</tbody>
</table>
</body>
</html>[/code][code=html]<table cellpadding="3" cellspacing="0" border="1" id="mytable">
<thead>
<tr>
<th id="th_date">Date</th>
<th id="th_number">Number</th>
<th id="th_subtotal">Subtotal</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th_date">2007-08-01</td>
<td headers="th_number">10</td>
<td headers="th_subtotal">10</td>
</tr>
<tr>
<td headers="th_date">2007-08-01</td>
<td headers="th_number">15</td>
<td headers="th_subtotal">25</td>
</tr>
<tr>
<td headers="th_date">2007-08-01</td>
<td headers="th_number">2</td>
<td headers="th_subtotal">27</td>
</tr>
<tr>
<td headers="th_date">2007-08-02</td>
<td headers="th_number">8</td>
<td headers="th_subtotal">8</td>
</tr>
<tr>
<td headers="th_date">2007-08-02</td>
<td headers="th_number">9</td>
<td headers="th_subtotal">17</td>
</tr>
</tbody>
</table>[/code] <br/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
<script type="text/javascript">
function calculate () {
var table = document.getElementById('tableid');
table.rows[1].cells[2].innerHTML = table.rows[1].cells[1].innerHTML;
for( var n = 2; n < table.rows.length; n ++ ) {
if( table.rows[n].cells[0].innerHTML == table.rows[n-1].cells[0].innerHTML ) {
table.rows[n].cells[2].innerHTML = Number(table.rows[n-1].cells[2].innerHTML) + Number(table.rows[n].cells[1].innerHTML); }
else { table.rows[n].cells[2].innerHTML = table.rows[n].cells[1].innerHTML; }
}
}
</script>
</head>
<body>
<input value="calculate" onclick="calculate()" type="button">
<table id="tableid" style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<i> </i><tr>
<i> </i> <td><span style="font-weight: bold;">date</span></td>
<i> </i> <td><span style="font-weight: bold;">number</span></td>
<i> </i> <td><span style="font-weight: bold;">subtotal</span></td>
<i> </i></tr>
<i> </i><tr>
<i> </i> <td>2007-08-01</td>
<i> </i> <td>10</td>
<i> </i> <td></td>
<i> </i></tr>
<i> </i><tr>
<i> </i> <td>2007-08-01</td>
<i> </i> <td>15</td>
<i> </i> <td></td>
<i> </i></tr>
<i> </i><tr>
<i> </i> <td>2007-08-01</td>
<i> </i> <td>2</td>
<i> </i> <td></td>
<i> </i></tr>
<i> </i><tr>
<i> </i> <td>2007-08-02</td>
<i> </i> <td>8</td>
<i> </i> <td></td>
<i> </i></tr>
<i> </i><tr>
<i> </i> <td>2007-08-02</td>
<i> </i> <td>9</td>
<i> </i> <td></td>
<i> </i></tr>
</tbody>
</table>
<br>
</body>
</html>
0.1.9 — BETA 5.16