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:

Related Tags for JavaScript Show Hide table:

«Previous Index Next»