Building a 3D HTML Table

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.