Jump to content

Show/hide tables dynamically?


kvijayhari

Recommended Posts

Hi , I'm having a page with two tables inside a table. The two tables inside the main table has unique ids.I have two buttons as show and hide.What i want do is , when i click the show button the contents of the first table should be visible and when i click the hide button the contents of the first table should hide and important thing is that the second table should be dynamically placed in accordance with the first one.Here is the codings.

<script language=javascript>function show(){	var tbl = document.getElementById('default');	tbl.style.visibility = visible;}function hide(){	var tbl = document.getElementById('default');	tbl.style.visibility = collapse;}</script><center><table border=01 width=80% height=100%><tr><td>	 <div align=left>	   <img src='' title="Click to Show" style="cursor:pointer;" onclick=show()>	   <img src='' title="Click to Hide accounts" style="cursor:pointer;" onclick=hide()>	 </div>	 <table id='default' border=0 cellpadding=0 cellspacing=1 style="font-size: 14px; font-family: arial; visiblity:hidden;"> 	   <tr>		 <!-- some php code here-->   	 </tr>	 </table>	 <br>	   <table border=0 cellpadding=0 cellspacing=1 style="font-size: 14px; font-family: arial; position:relative;"> 		<tr><th height=25 align=left>User Created</th></tr>		<tr height=20>			<!-- some php code here-->		</tr>	 </table></td></tr><tr align=center height=35><td colspan=4 halign=center><input class=frmbtn name=add type=submit onClick=''></td></tr></table></center>

Pls help me to sort it out. :cry:

Link to post
Share on other sites
function show(){	var tbl = document.getElementById('default');	//tbl.style.visibility = visible;	tbl.style.display = 'block';}function hide(){	var tbl = document.getElementById('default');	//tbl.style.visibility = collapse;	tbl.style.display = 'none';}

Link to post
Share on other sites
You could also compress that into a single function, right? Like so:
function toggleVisibility(){  var table = document.getElementByID('default');  if(table.style.display == 'block')	table.style.display == 'none')  else	table.style.display == 'block';}

Nice format and slim code..I'll try to write these kind of code.Thank you :)
Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...