This is first post in to "Coding Playground" blog category. As I have web development background, I still do some coding for living. Some times new task requires some learning of some new tricks. "Hiding table" is not something new to web, but I never did that before, there was no need in that before today. Actually I did something similar like four years ago, but that was long time ago so this doesn’t count.
Okay, You need to hide, and then on some action, show some table. For me it’s adding or editing some company brand in site admin panel. Here’s what I have to share:
<input type="button" onclick="document.getElementById('addedit').style.display='none';" value="hide">
<input type="button" onclick="document.getElementById('addedit').style.display='';" value="show">
<table cellspacing="1" cellpadding="3" id="addedit">
<tr> <td> Hello world! WebLifeLive.com rule! </td> </tr>
</table>
This code creates two buttons with "show" and "hide" labels and a table with simple text in it. Put this code in to .html and open with the browser. "show" and "hide"buttons shows and hides "Hello world! WebLifeLive.com rule!" text.
So "display" is a CSS property, and I use JavaScript in "onclick" button action, to set value to "display" property.
This code works fine in 4 browsers I tested on PC: IE, FireFox, Opera and Safari. Happy codding!
Loading ...