Comparing Test Marks Using a 3D HTML Recordset - Calculating across the Vertical Planes with 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. For simplicity we shall have only averages. 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;
}
var numberOfVHPlanes
function numberOfVHPlanes()
{
numberOfVHPlanes = document.getElementById('T00').rows[0].cells.length;
return numberOfVHPlanes;
}
//function to find the average marks per student per subject
function avgMarksSS()
{
var sum=0;
var numOfVPlanes = numberOfVHPlanes();
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))
{
average = sum/(numOfVPlanes-1);
//put this in the last cell
document.getElementById(TID).rows[0].cells[k+1].innerHTML = Math.round(average);
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">History
</td>
<td id="TD011" style="display:none">History
</td>
<td id="TD012" style="display:none">History
</td>
<td id="TD013" style="display:none">History(Avg)
</td>
</tr>
</table>
</td>
<td id="TD02">
<table id="T02">
<tr id="TR02">
<td id="TD020" style="display:block">Geography
</td>
<td id="TD021" style="display:none">Geography
</td>
<td id="TD022" style="display:none">Geography
</td>
<td id="TD023" style="display:none">Geography(Avg)
</td>
</tr>
</table>
</td>
</tr>
<tr id="R1">
<td id="TD10">
<table id="T10">
<tr id="TR10">
<td id="TD100" style="display:block">John
</td>
<td id="TD101" style="display:none">John
</td>
<td id="TD102" style="display:none">John
</td>
<td id="TD103" style="display:none">John
</tr>
</table>
</td>
<td id="TD11">
<table id="T11">
<tr id="TR11">
<td id="TD110" style="display:block">46
</td>
<td id="TD111" style="display:none">51
</td>
<td id="TD112" style="display:none">62
</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">75
</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">Peter
</td>
<td id="TD201" style="display:none">Peter
</td>
<td id="TD202" style="display:none">Peter
</td>
<td id="TD203" style="display:none">Peter
</td>
</tr>
</table>
</td>
<td id="TD21">
<table id="T21">
<tr id="TR21">
<td id="TD210" style="display:block">70
</td>
<td id="TD211" style="display:none">52
</td>
<td id="TD212" style="display:none">63
</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">47
</td>
<td id="TD221" style="display:none">50
</td>
<td id="TD222" style="display:none">59
</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 Average per Student per Subject</button>
</body>
</html>
Please enable JavaScript to view the comments powered by Disqus. blog comments powered by 
HTML 
Comparing Subtotals Using a 3D HTML Recordset
