Building a 3D HTML Table - Open the File
(Page 3 of 4 )
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.
Next: Explanation of the Code >>
More HTML Articles
More By Chrysanthus Forcha
