Latest Tutorials| Questions and Answers|Ask Questions?|Site Map

Home Javascript Javascriptexamples JavaScript Hide Table Rows

Related Tutorials


Share on Google+Share on Google+

JavaScript Hide Table Rows

This page discusses - JavaScript Hide Table Rows

JavaScript Hide Table Rows


In this section, you will learn how to hide table rows using JavaScript.

In the given example, we have created a table. The method getElementById() of document object grabs the id of the table. Then we have determined the length of rows using the length property and stored it in the variable 'len'. To store the state of the table, we have used the variable hide and created another variable rowStyle to store the required style of the rows. It is set to none to hide a row. After that we have created a for loop which go through all the rows of the table starting with the second row, and set their style with the code t.rows[i].style.display = rowStyle.

Here is the code:

<h2>Hide Table Row</h2>
<script language="javascript">
var hide= true;
function hideRows(tableId){
var t = document.getElementById(tableId);
var len = t.rows.length;
var rowStyle = (hide)? "none":"";
for(i=1 ; i< len; i++){
t.rows[i].style.display = rowStyle;
<table border="1" id="table">
<input type="Button" value="Hide Rows" onclick="hideRows('table');">

Output will be displayed as:

On clicking the button, all the rows of the table gets removed except the first one as we have started the for loop with second row:

Download Source Code:



If you enjoyed this post then why not add us on Google+? Add us to your Circles

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

Related Tutorials

Discuss: JavaScript Hide Table Rows  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
June 6, 2013
Row hiding

Thank you. This helped a lot.