Comparing Subtotals Using a 3D HTML Recordset - Calculating Totals with a 3D Recordset
(Page 3 of 4 )
Before we carry on, let us have some experience with calculations across the vertical planes in a 3D recordset. Well, for simplicity we shall have only addition. Copy the following code into your text editor. Save the resulting file as a web page (.html). I will comment on the operation of the code afterward. Open the file in a browser.
<html>
<head>
<script type="text/javascript">
//function to scroll vertical planes
var next = 0; //for changing vertical planes
function scrollInward()
{
for (i=0; i<3; i++)
{
for (j=0; j<3; j++)
{
//form the inner table IDs
TID = 'T' + i +j
document.getElementById(TID).rows[0].cells[next].style.display = "none";
var k = next + 1;
if (k==4)
k = 0;
document.getElementById(TID).rows[0].cells[k].style.display = "block";
}
}
next+=1;
if (next == 4)
next = 0;
}
function numberOfHPlanes()
{
var numberOfHPlanes = document.getElementById('Recordset1').rows.length;
return numberOfHPlanes;
}
function numberOfVPlanes()
{
numberOfVPlanes = document.getElementById('T00').rows[0].cells.length;
return numberOfVPlanes;
}
//function to find the average marks per Category per Column
function avgMarksSS()
{
var sum=0;
var numOfVPlanes = numberOfVPlanes();
for (i=1; i<3; i++)
{
for (j=1; j<3; j++)
{
//form the inner table IDs
TID = 'T' + i +j;
for (k=0; k<(numOfVPlanes-1);k++)
{
value = document.getElementById(TID).rows[0].cells[k].innerHTML;
sum = sum + parseFloat(value);
if (k==(numOfVPlanes-2))
{
//put this in the last cell
document.getElementById(TID).rows[0].cells[k+1].innerHTML = sum;
sum = 0;
}
}
}
}
}
</script>
</head>
<body>
<table id="Recordset1">
<tr id="R0">
<td id="TD00">
<table id="T00">
<tr id="TR00">
<td id="TD000" style="display:block">
</td>
<td id="TD001" style="display:none">
</td>
<td id="TD002" style="display:none">
</td>
<td id="TD003" style="display:none">
</td>
</tr>
</table>
</td>
<td id="TD01">
<table id="T01">
<tr id="TR01">
<td id="TD010" style="display:block">No. Ordered
</td>
<td id="TD011" style="display:none">No. Ordered
</td>
<td id="TD012" style="display:none">No. Ordered
</td>
<td id="TD013" style="display:none">Total No. Ordered
</td>
</tr>
</table>
</td>
<td id="TD02">
<table id="T02">
<tr id="TR02">
<td id="TD020" style="display:block">Cost ($)
</td>
<td id="TD021" style="display:none">Cost ($)
</td>
<td id="TD022" style="display:none">Cost ($)
</td>
<td id="TD023" style="display:none">Total Cost ($)
</td>
</tr>
</table>
</td>
</tr>
<tr id="R1">
<td id="TD10">
<table id="T10">
<tr id="TR10">
<td id="TD100" style="display:block">Pens
</td>
<td id="TD101" style="display:none">Pens
</td>
<td id="TD102" style="display:none">Pens
</td>
<td id="TD103" style="display:none">Pens
</tr>
</table>
</td>
<td id="TD11">
<table id="T11">
<tr id="TR11">
<td id="TD110" style="display:block">150
</td>
<td id="TD111" style="display:none">210
</td>
<td id="TD112" style="display:none">220
</td>
<td id="TD113" style="display:none">
</td>
</tr>
</table>
</td>
<td id="TD12">
<table id="T12">
<tr id="TR12">
<td id="TD120" style="display:block">50
</td>
<td id="TD121" style="display:none">70
</td>
<td id="TD122" style="display:none">76
</td>
<td id="TD123" style="display:none">
</td>
</tr>
</table>
</td>
</tr>
<tr id="R2">
<td id="TD20">
<table id="T20">
<tr id="TR20">
<td id="TD200" style="display:block">Books
</td>
<td id="TD201" style="display:none">Books
</td>
<td id="TD202" style="display:none">Books
</td>
<td id="TD203" style="display:none">Books
</td>
</tr>
</table>
</td>
<td id="TD21">
<table id="T21">
<tr id="TR21">
<td id="TD210" style="display:block">100
</td>
<td id="TD211" style="display:none">125
</td>
<td id="TD212" style="display:none">135
</td>
<td id="TD213" style="display:none">
</td>
</tr>
</table>
</td>
<td id="TD22">
<table id="T22">
<tr id="TR22">
<td id="TD220" style="display:block">1500
</td>
<td id="TD221" style="display:none">1900
</td>
<td id="TD222" style="display:none">2100
</td>
<td id="TD223" style="display:none">
</td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br />
<button type="button" onclick="scrollInward()">Scroll Inward</button>
<br /><br />
<button type="button" onclick="avgMarksSS()">Determine Total per Category per Column</button>
</body>
</html>
Next: Code Explanation >>
More HTML Articles
More By Chrysanthus Forcha
