Building a 3D HTML Table - Explanation of the Code
(Page 4 of 4 )
Inspect the way I wrote the code for the table and also note the way I gave the IDs for the table element.
The fundamental statement for the JavaScript code is
document.getElementById(TID).rows[0].cells[k].
This returns a reference to a cell in the one-row table whose id is TID. Recall that each of these one-row tables has only one row, as the name implies. So, to access the row, you need only the index 0. A particular cell in the row is accessed with the index variable, k.
In a function loop, different values of TID have to be formed in order to access the different one-row tables and their cells.
The scrollInward() Function
This function changes the values of the CSS display property of the cells of the V plane that is seen to "none." It then changes the values of the CSS display property of the cells of the next plane to "block." The function uses one global variable. This is the code:
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;
}
The giveValue(i,j,k,val) Function
This function takes the indices (i,j,k) of a particular cell as well as the new value you want for it. It then sets the value. This is the function:
function giveValue(i,j,k,val)
{
//form the inner table ID
TID = 'T' + i + j;
document.getElementById(TID).rows[0].cells[k].innerHTML = val;
}
The toFive() Function
This is a very specific function. It is similar to the above function, but it needs three loops, one for each dimension, to access all the cells. This is the function:
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';
}
}
}
}
Uses of a 3D HTML Table
A 3D table can be used for a picture gallery. I will write an article on this soon.
It can also be used for a 3D HTML Database Recordset, something I have come up with. This is the subject of my next article.
Finally, a 3D table can be used for animation (moving images). You show the content of one plane first, then you show the content of the next plane, which is slightly different, continuing in this manner.
Conclusion
A 3D HTML table is an HTML 3D grid of HTML TD elements. The HTML specification does not have any element for a 3D table. There are several ways to achieve this. I have shown you mine.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
