Hidden Tables

admin

Administrator
Staff member
I am trying to build an HTML page that will display different data when a user selects a view from a drop down. I want to do this all on the client side, since I will bring back all of the info in one shot. I have thought about using hidden fields, but I am also thinking about hiding whole table and making them visible when they select a certain option. Does anyone have any recommendations or sample code on how to do this? I would like hide the tables but I am not sure how to position them so that they appear in the same spot (hiding on table and making another visible).<!--content-->Use the innerHTML property.<br />
<br />
<br />
<button onclick='document.all.common.innerHTML=document.all.divOne.innerHTML'>Table One</button><br />
<button onclick='document.all.common.innerHTML=document.all.divTwo.innerHTML'>Table Two</button><br />
<br />
<div id='common' style='height:100'></div><br />
<br />
<div id='divOne' style='visibility: hidden; display: none'><br />
<table id='tableOne' border='1'><br />
<tr><br />
<td>My Name is</td><br />
</tr><br />
<tr><br />
<td>Table One</td><br />
</tr><br />
</table><br />
</div><br />
<br />
<div id='divTwo' style='visibility: hidden; display: none'><br />
<table id='tableTwo' border='1'><br />
<tr><br />
<td>My Name is</td><br />
<td>Table Two</td><br />
</tr><br />
</table><br />
</div><!--content-->
 
Back
Top