Home arrow HTML arrow Page 3 - 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
Poor Best
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 - Experience with a 3D Recordset
(Page 3 of 4 )

Before we carry on, let us have some experience with a 3D recordset. Copy the following code into your text editor. Save the resulting file as a web page (.html). I will comment on the operation of the code afterward. Open the file in a browser.


<html>


<head>

<script type="text/javascript">


var present = 0; //for changing Vertical planes


//function to scroll Vertical planes

function nextVPlane()

{

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;

}


function giveNoHVPlanes()

{

var numberOfHPlanes = document.getElementById('Recordset1').rows.length;

var numberOfVPlanes = document.getElementById('T00').rows[0].cells.length;

alert(numberOfHPlanes);

alert(numberOfVPlanes);

}



arr1 = new Array(3)

arr1[0]="Pen";

arr1[1]="200";

arr1[2]="60";



function modifyRow(rowNo, VplaneNo)

{

for (j=0;j<3;j++)

{

//form the table IDs

TID = 'T' + rowNo + j;

document.getElementById(TID).rows[0].cells[VplaneNo].innerHTML = arr1[j];

}

}

 

function modifyHPlane(HplaneNo)

{

for (k=0;k<3;k++)

{

for (j=0;j<3;j++)

{

//form the table IDs

TID = 'T' + HplaneNo + j;


document.getElementById(TID).rows[0].cells[k].innerHTML = arr1[j];

}

}

}


function deleteRow(rowNo, VplaneNo)

{

for (j=0;j<3;j++)

{

//form the table IDs

TID = 'T' + rowNo + j;

document.getElementById(TID).rows[0].cells[VplaneNo].innerHTML ="";

}

}

 


function deleteVPlane(VplaneNo)

{

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[VplaneNo].innerHTML ="";

}

}

}

 

</script>

</head>


<body>

<table id="Recordset1">

<tr id="R0">

<td id="TD00">

<table id="T00">

<tr id="TR00">

<td id="TD000" style="display:block">Books

</td>

<td id="TD001" style="display:none">Books

</td>

<td id="TD002" style="display:none">Books

</td>

</tr>

</table>

</td>

<td id="TD01">

<table id="T01">

<tr id="TR01">

<td id="TD010" style="display:block">100

</td>

<td id="TD011" style="display:none">125

</td>

<td id="TD012" style="display:none">135

</td>

</tr>

</table>

</td>

<td id="TD02">

<table id="T02">

<tr id="TR02">

<td id="TD020" style="display:block">1500

</td>

<td id="TD021" style="display:none">1900

</td>

<td id="TD022" style="display:none">2100

</td>

</tr>

</table>

</td>

</tr>

<tr id="R1">

<td id="TD10">

<table id="T10">

<tr id="TR10">

<td id="TD100" style="display:block">pens

</td>

<td id="TD101" style="display:none">pens

</td>

<td id="TD102" style="display:none">pens

</tr>

</table>

</td>

<td id="TD11">

<table id="T11">

<tr id="TR11">

<td id="TD110" style="display:block">150

</td>

<td id="TD111" style="display:none">210

</td>

<td id="TD112" style="display:none">220

</td>

</tr>

</table>

</td>

<td id="TD12">

<table id="T12">

<tr id="TR12">

<td id="TD120" style="display:block">50

</td>

<td id="TD121" style="display:none">70

</td>

<td id="TD122" style="display:none">75

</td>

</tr>

</table>

</td>

</tr>

<tr id="R2">

<td id="TD20">

<table id="T20">

<tr id="TR20">

<td id="TD200" style="display:block">Pencils

</td>

<td id="TD201" style="display:none">Pencils

</td>

<td id="TD202" style="display:none">Pencils

</td>

</tr>

</table>

</td>

<td id="TD21">

<table id="T21">

<tr id="TR21">

<td id="TD210" style="display:block">200

</td>

<td id="TD211" style="display:none">240

</td>

<td id="TD212" style="display:none">255

</td>

</tr>

</table>

</td>

<td id="TD22">

<table id="T22">

<tr id="TR22">

<td id="TD220" style="display:block">15

</td>

<td id="TD221" style="display:none">20

</td>

<td id="TD222" style="display:none">25

</td>

</tr>

</table>

</td>

</tr>

</table>


<br /><br />

<button type="button" onclick="nextVPlane()">Next Vertical Plane</button>

<br /><br />

<button type="button" onclick="giveNoHVPlanes()">Give No. of H and V Planes</button>

<br /><br />

<button type="button" onclick="modifyRow(1,1)">Modify Row</button>

<br /><br />

<button type="button" onclick="modifyHPlane(1)">Modify H Plane</button>

<br /><br />

<button type="button" onclick="deleteRow(1,1)">Delete Row</button>

<br /><br />

<button type="button" onclick="deleteVPlane(1)">Delete V Plane</button>

</body>


</html>


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
Find More HTML Tutorials

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