Home Javascript Javascriptexamples JavaScript Show Hide table
Questions:Ask|Latest


 
 

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

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

Ask Questions?    Discuss: JavaScript Show Hide table  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
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!
DMCA.com