Javascript hide table row - Javascript hide row example and code


Home - Tutorials - Miscellaneous

This article demonstrates how you can hide table row with javascript and how you can show it again by pressing a button.

Tutorial info:


Name:Javascript hide table row
Total steps:3
Category:Miscellaneous
Date:2007-11-10
Level:Beginner
Product:See complete product
Viewed:232088

Bookmark Javascript hide table row



AddThis Social Bookmark Button

Step 3 - Javascript hide row example and code


Javascript hide table row

If you have followed the tutorial you should get the same result as here: 

TH-1TH-2TH-3
cell-11cell-12cell-13
cell-21cell-22cell-23

And the code:

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Javascript hide table row</title>
  6. </head>
  7.  
  8. <script type="text/javascript">
  9. function displayRow(){
  10. var row = document.getElementById("captionRow");
  11. if (row.style.display == '') row.style.display = 'none';
  12. else row.style.display = '';
  13. }
  14. </script>
  15.  
  16. <table width="300" border="1">
  17. <tr id="captionRow"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
  18. <tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
  19. <tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
  20. </table>
  21. <p><button onclick="displayRow()" >Show / Hide</button></p>
  22. </body>
  23. </html>




Previous Step of Javascript hide table row


Tags: javascript hide table row, javascript hide table, javascript hide row, hide table row

Javascript hide table row - Table of contents
Step 1 - Introduction
Step 2 - Hide the row
Step 3 - Javascript hide row example and code



GAD Tower


F1 Site Family
AJAX F1
CSS F1
Database F1
HTML F1
Java F1
JavaScript F1
PHP F1

Family tutorials
PHP Array
PHP Redirect
PHP Session
AJAX PHP
AJAX File Upload
AJAX Rating System
MySQL Create User
Mysqldump Example
MySQL Concat

Total time: 0.1406