Building a 3D HTML Table

If you have opened the file, you should see this:

DATA000 DATA010 DATA020

DATA100 DATA110 DATA120

DATA200 DATA210 DATA220

and three buttons. The above nine values are the cell contents of the first vertical pane. There are three planes, three rows and three columns in a plane. This gives you 3 x 3 x 3 = 27 cells in the example.

The first button is labeled "Scroll Inward." Click it twice and you should see the values for the next two V planes. This button allows you to scroll inward (in the z-axis); when you reach the last plane, clicking it will bring back the first plane. Click the button once more and you should see the first plane again.

The next button is labeled "Give Value." When you click this button, the content of the cell with indices (1,1,1) is given the value "woman." This cell is the middle cell in the middle V plane. Click the button. The cell now has the value "woman." You cannot see it because it is in the second vertical plane. Click the "Scroll Inward" button and you should see it.

The last button is labeled "To Five." It sets all the values of the 27 cells to 5. Click it. Use the "Scroll Inward" button to verify that all the values are now "5." When you click the button it will seem as if nothing is changing; since all the values are 5 you can't see the change.

Some DOM Features

We can carry out all of the above functions and more, thanks to some DOM features that I describe below.

Table Object Collections

cells[]: Returns an array containing each cell in a table.

rows[]: Returns an array containing each row in a table.

Table Object Methods

insertRow(): Inserts a new row in a table.

deleteRow(): Deletes a row from a table.

The features of the HTML DOM TableRow Object we shall use are as follows:

TableRow Object Collections

cells[]: Returns an array containing each cell in the table row.

TableRow Object Methods

insertCell(): Inserts a cell in a table row.

The features of the HTML DOM TableRow Object we shall use are as follows:

TableCell Object Properties

InnerHTML: Sets or returns the HTML between the start and end tags of a table cell.