Home arrow HTML arrow Page 4 - Using a 3D HTML Table as a Recordset
HTML

Using a 3D HTML Table as a Recordset


The HTML specification does not give an HTML element for a 3D table. There are, however, several ways of designing a 3D table. Last week's article showed you my own way of doing so. I strongly advise you to read that one first, before you read this one, which will go into greater detail and show you how to manipulate a 3D HTML table.

Author Info:
By: Chrysanthus Forcha
Rating: 3 stars3 stars3 stars3 stars3 stars / 2
November 18, 2008
TABLE OF CONTENTS:
  1. · Using a 3D HTML Table as a Recordset
  2. · The CSS Display Property
  3. · Experience with a 3D Recordset
  4. · Code Explanation

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using a 3D HTML Table as a Recordset - Code Explanation
(Page 4 of 4 )


We have a recordset that has a 3D table of three horizontal planes and three vertical planes.

Now, click the "Next Vertical Plane" button repeatedly and you should see the contents of the different vertical planes.

Click the "Give No. of H and V Planes" button. A first alert box will give the number of horizontal planes. When you click its OK button, the second will appear, giving the number of vertical planes. Click its OK button to send it away.

Click the "Modify Row" button. The contents of the row in the middle vertical plane will be changed to the content of an array. You may have to use the "Next Vertical Plane" button to scroll inward and confirm that it has truly changed.

Refresh the page to reset the data. This is for convenience.

Click the "Modify H Plane" button. All of the rows of the middle horizontal plane will have the same content. Use the "Next Vertical Plane" button to confirm this.

Refresh the page to reset the data. This is for convenience.

Click the "Delete Row" button. The contents of the middle row in the second vertical plane will all be erased. Use the "Next Vertical Plane" button to confirm this.

Refresh the page to reset the data. This is for convenience.

Click the "Delete V Plane" button. The contents of the second vertical plane will all be erased. Use the "Next Vertical Plane" button to confirm this.

The Code

The recordset is a 3D HTML table element.

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. Therefore, 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 tables and their cells.

If you have read the article titled "Building a 3D HTML Table" that I wrote, the complete code should be self-explanatory.

Conclusion

My browser did not allow me to meet the minimum requirements of a recordset. However you can still do a lot with what today's browsers permit. All browsers today will allow you have a good 3D read-only recordset and some features for writing to them.


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.

blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 6 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials