Home Javascript Javascriptexamples JavaScript Show Hide table

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript Show Hide table

Advertisement
This page discusses - JavaScript Show Hide table

JavaScript Show Hide table

        

In this section, we are going to show and hide table on clicking the button using the JavaScript.

In the given example, we have created a table. The method document.getElementById('div') grabs the id of the table and refer to property 'visibility' with style object. The 'visibility' property makes the element visible or invisible. Now, if you apply the visibility property with the 'hidden' value to the table, the table will disappear and  if you use the 'visible' value, the table will be visible again. When you load the page you will get two buttons. On clicking the button 'Show', the function showTable() is called and the table will be visible. But on clicking the button 'Hide', the function hideTable() is called that makes the table invisible.

Here is the code:

<html>
<h2>Show or Hide table in JavaScript</h2>
<script>
function showTable(){
document.getElementById('table').style.visibility = "visible";
}
function hideTable(){
document.getElementById('table').style.visibility = "hidden";
}
</script>
<body onload="javascript:hideTable()">
<input type='button' onClick='javascript:showTable();' value='show'>
<input type='button' onClick='javascript:hideTable();' value='hide'>
<table id='table' border=1>
<tr><th>SNO</th><th>NAME</th><th>ADDRESS</th></tr>
<tr><td> 1</td><td> Angelina</td><td> Delhi </td></tr>
<tr><td> 2</td><td> Simran </td><td> Mumbai </td></tr>
<tr><td> 3</td><td> Sania </td><td> Chennai </td></tr>
<tr><td> 4</td><td> Martina </td><td> Kolkata </td></tr>
</table>
</body>
</html>

Output will be displayed as:

On clicking the button 'show', the table will get displayed:

Download Source Code:

        

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: JavaScript Show Hide table  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:4
pankaj
August 9, 2012
Hide table in HTML

i want to hide the table on page load event and then want to show it throug a perticular button....
Sophia Sturges
July 28, 2013
Many thanks

I used this for an assignment for one of my classes. I looked through so many examples today and this worked perfectly. Thank you for posting this!
Michael Herdman
May 19, 2014
show/hide table

This is wonderful! However, it leaves an empty space (equal to that occupied by the table) when the table is hidden. I have a big table that I would like to be displayed on demand but, if hidden, does not leave the space. Is there a way of doind this? Thanks, Mike
Chetan
September 1, 2014
How to hide/display more than two table?

<!DOCTYPE html> <html> <h2>Show or Hide table in JavaScript</h2> <script> function showTable(){ document.getElementById('table').style.visibility = "visible"; document.getElementById('table1').style.visibility = "visible"; } function hideTable(){ document.getElementById('table').style.visibility = "hidden"; document.getElementById('table1').style.visibility = "hidden"; } </script> <body> <div onload="javascript:hideTable()"> <input type='button' onClick='javascript:showTable();' value='show1'> <input type='button' onClick='javascript:hideTable();' value='hide1'> <input type='button' onClick='javascript:showTable();' value='show2'> <input type='button' onClick='javascript:hideTable();' value='hide2'> <table id='table' border=1> <tr><th>SNO</th><th>NAME</th><th>ADDRESS</th></tr> <tr><td> 1</td><td> Angelina</td><td> Delhi </td></tr> <tr><td> 2</td><td> Simran </td><td> Mumbai </td></tr> <tr><td> 3</td><td> Sania </td><td> Chennai </td></tr> <tr><td> 4</td><td> Martina </td><td> Kolkata </td></tr> </table> <table id='table1' border=1> <tr><th>SNO</th><th>NAME</th><th>ADDRESS</th></tr> <tr><td> 1</td><td> Angelina</td><td> Delhi </td></tr> <tr><td> 2</td><td> Simran </td><td> Mumbai </td></tr> <tr><td> 3</td><td> Sania </td><td> Chennai </td></tr> <tr><td> 4</td><td> Martina </td><td> Kolkata </td></tr> </table> </div> </body> </html>
DMCA.com