Javascript hide table row


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:221804

Bookmark Javascript hide table row



AddThis Social Bookmark Button

Step 1 - Introduction


Javascript hide table row

Time to time it can happen that you want to make your html table more attractive and more interactive. Let's suppose you want to allow your visitors to hide and show some special rows in your table. Of course you are here because you want to do it without reloading the page. It is possible with javascript to hide table rows and show it again later if you want.

First of all lets create a basic and simple html 3x3 table where the first row contains the column captions. With the following html code:

Code:
  1. <table width="300" border="1">
  2. <tr><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
  3. <tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
  4. <tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
  5. </table>

you will get a table like this:

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

Ok, that is our starting point. What we want is to add a button to the page to hide table rows. In this case we will hide the caption row. 

To do this we will create a Javascript function which will be responsible for hiding and showing the row. Besides this we add a button to the page and it's onClick event will trigger the Javascript function.

Now it's time to make some real coding :)




Next 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
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Scripts F1
Tutorial F1
Windows 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.1771