Building a 3D HTML Table - Demonstration
(Page 2 of 4 )
Before I continue explaining, let us have some experience with a 3D table. Copy the following code into your text editor. Save the resulting file as an HTML file (.html). Open the file with a browser. I will explain how the code works afterward.
<html>
<head>
<script type="text/javascript">
//Changing vertical planes
var present = 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[present].style.display = "none";
var k = present + 1;
if (k==3)
k = 0;
document.getElementById(TID).rows[0].cells[k].style.display = "block";
}
}
present+=1;
if (present == 3)
present = 0;
}
//Give a particular cell value
function giveValue(i,j,k,val)
{
//form the inner table ID
TID = 'T' + i + j;
document.getElementById(TID).rows[0].cells[k].innerHTML = val;
}
//Change all cell values to the number, 5
function toFive()
{
for (i=0; i<3; i++)
{
for (j=0; j<3; j++)
{
//form the inner table IDs
TID = 'T' + i +j
for (k=0; k<3;k++)
{
document.getElementById(TID).rows[0].cells[k].innerHTML = '5';
}
}
}
}
</script>
</head>
<body>
<table id="T1">
<tr id="R0">
<td id="TD00">
<table id="T00">
<tr id="TR00">
<td id="TD000" style="display:block">DATA000
</td>
<td id="TD001" style="display:none">DATA001
</td>
<td id="TD002" style="display:none">DATA002
</td>
</tr>
</table>
</td>
<td id="TD01">
<table id="T01">
<tr id="TR01">
<td id="TD010" style="display:block">DATA010
</td>
<td id="TD011" style="display:none">DATA011
</td>
<td id="TD012" style="display:none">DATA012
</td>
</tr>
</table>
</td>
<td id="TD02">
<table id="T02">
<tr id="TR02">
<td id="TD020" style="display:block">DATA020
</td>
<td id="TD021" style="display:none">DATA021
</td>
<td id="TD022" style="display:none">DATA022
</td>
</tr>
</table>
</td>
</tr>
<tr id="R1">
<td id="TD10">
<table id="T10">
<tr id="TR10">
<td id="TD100" style="display:block">DATA100
</td>
<td id="TD101" style="display:none">DATA101
</td>
<td id="TD102" style="display:none">DATA102
</tr>
</table>
</td>
<td id="TD11">
<table id="T11">
<tr id="TR11">
<td id="TD110" style="display:block">DATA110
</td>
<td id="TD111" style="display:none">DATA111
</td>
<td id="TD112" style="display:none">DATA112
</td>
</tr>
</table>
</td>
<td id="TD12">
<table id="T12">
<tr id="TR12">
<td id="TD120" style="display:block">DATA120
</td>
<td id="TD121" style="display:none">DATA121
</td>
<td id="TD122" style="display:none">DATA122
</td>
</tr>
</table>
</td>
</tr>
<tr id="R2">
<td id="TD20">
<table id="T20">
<tr id="TR20">
<td id="TD200" style="display:block">DATA200
</td>
<td id="TD201" style="display:none">DATA201
</td>
<td id="TD202" style="display:none">DATA202
</td>
</tr>
</table>
</td>
<td id="TD21">
<table id="T21">
<tr id="TR21">
<td id="TD210" style="display:block">DATA210
</td>
<td id="TD211" style="display:none">DATA211
</td>
<td id="TD212" style="display:none">DATA212
</td>
</tr>
</table>
</td>
<td id="TD22">
<table id="T22">
<tr id="TR22">
<td id="TD220" style="display:block">DATA220
</td>
<td id="TD221" style="display:none">DATA221
</td>
<td id="TD222" style="display:none">DATA222
</td>
</tr>
</table>
</td>
</tr>
</table>
<button type="button" onclick="scrollInward()">Scroll Inward</button>
<br /><br />
<button type="button" onclick="giveValue(1,1,1,'Woman')">Give Value</button>
<br /><br />
<button type="button" onclick="toFive()">To Five</button>
</button>
</body>
</html>
Next: Open the File >>
More HTML Articles
More By Chrysanthus Forcha
