Show/hide rows and Highlighting cells

Enhance and add functionality with interactivity to your HTML tables with jQuery

(For more resources related to this topic, see here.)

Show/hide rows

Click a link to trigger hiding or displaying of table rows.

Getting ready

Once again, start off with an HTML table. This one is not quite as simple a table as in previous recipes. You'll need to create a few <td> tags that span the entire table, as well as provide some specific classes to certain elements.

How to do it...

  1. Again, give the table an id attribute. Each of the rows that represent a department, specifically the rows that span the entire table, should have a class attribute value of dept.

    <table border="1" id="employeeTable"> <thead> <tr> <th>Last Name</th> <th>First Name</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td colspan="3" class="dept"> </td> </tr>

  2. Each of the department names should be links where the <a> elements have a class of rowToggler.

    <a href="#" class="rowToggler">Accounting</a>

  3. Each table row that contains employee data should have a class attribute value that corresponds to its department.

    Note that class names cannot contain spaces. So in the case of the Information Technology department, the class names should be InformationTechnology without a space. The issue of the space will be addressed later.

    <tr class="Accounting"> <td>Frang</td> <td>Corey</td> <td>555-1111</td> </tr>

  4. The following script makes use of the class names to create a table whose rows can be easily hidden or shown by clicking a link:

    <script type="text/javascript"> $( document ).ready( function() { $( "a.rowToggler" ).click( function( e ) { e.preventDefault(); var dept = $( this ).text().replace( /\s/g, "" ); $( "tr[class=" + dept + "]" ).toggle(); }) }); </script>

  5. With the jQuery implemented, departments are "collapsed", and will only reveal the employees when the link is clicked.

How it works...

The jQuery will "listen" for a click event on any <a> element that has a class of rowToggler. In this case, capture a reference to the event that triggered the action by passing e to the click handler function.

$( "a.rowToggler" ).click( function( e )

In this case, e is simply a variable name. It can be any valid variable name, but e is a standard convention. The important thing is that jQuery has a reference to the event. Why? Because in this case, the event was that an <a> was clicked. The browser's default behavior is to follow a link. This default behavior needs to be prevented.

As luck would have it, jQuery has a built-in function called preventDefault(). The first line of the function makes use of this by way of the following:


Now that you've safely prevented the browser from leaving or reloading the page, set a variable with a value that corresponds to the name of the department that was just clicked.

var dept = $( this ).text().replace( /\s/g, "" );

Most of the preceding line should look familiar. $( this ) is a reference to the element that was clicked, and text() is something you've already used. You're getting the text of the <a> tag that was clicked. This will be the name of the department.

But there's one small issue. If the department name contains a space, such as "Information Technology", then this space needs to be removed.

.replace( /\s/g, "" )

replace() is a standard JavaScript function that uses a regular expression to replace spaces with an empty string. This turns "Information Technology" into "InformationTechnology", which is a valid class name.

The final step is to either show or hide any table row with a class that matches the department name that was clicked.

Ordinarily, the selector would look similar to the following:

$( "tr.InformationTechnology" )

Because the class name is a variable value, an alternate syntax is necessary.

jQuery provides a way to select an element using any attribute name and value. The selector above can also be represented as follows:

$( "tr[class=InformationTechnology]" )

The entire selector is a literal string, as indicated by the fact that it's enclosed in quotes. But the department name is stored in a variable. So concatenate the literal string with the variable value:

$( "tr[class=" + dept + "]" )

With the desired elements selected, either hide them if they're displayed, or display them if they're hidden. jQuery makes this very easy with its built-in toggle() method.

Highlighting cells

Use built-in jQuery traversal methods and selectors to parse the contents of each cell in a table and apply a particular style (for example, a yellow background or a red border) to all cells that meet a specified set of criteria.

Getting ready

Borrowing some data from Tiobe (, create a table of the top five programming languages for 2012. To make it "pop" a bit more, each <td> in the Ratings column that's over 10 percent will be highlighted in yellow, and each <td> in the Delta column that's less than zero will be highlighted in red. Each <td> in the Ratings column should have a class of ratings, and each <td> in the Delta column should have a class of delta.

Additionally, set up two CSS classes for the highlights as follows:

.highlight { background-color: #FFFF00; } /* yellow */ .highlight-negative { background-color: #FF0000; } /* red */

Initially, the table should look as follows:

How to do it...

  1. Once again, give the table an id attribute (but by now, you knew that), as shown in the following code snippet:

    <table border="1" id="tiobeTable"> <thead> <tr> <th>Position<br />Dec 2012</th> <th>Position<br />Dec 2011</th> <th>Programming Language</th> <th>Ratings<br />Dec 2012</th> <th>Delta<br />Dec 2011</th> </tr> </thead>

  2. Apply the appropriate class names to the last two columns in each table row within the <tbody>, as shown in the following code snippet:

    <tbody> <tr> <td>1</td> <td>2</td> <td>C</td> <td class="ratings">18.696%</td> <td class="delta">+1.64%</td> </tr>

  3. With the table in place and properly marked up with the appropriate class names, write the script to apply the highlights as follows:

    <script type="text/javascript"> $( document ).ready( function() { $( "#tiobeTable tbody tr td.ratings" ).each( function( index ) { if ( parseFloat( $( this ).text() ) > 10 ) { $( this ).addClass( "highlight" ); } }); $( "#tiobeTable tbody tr" ).each( function( index ) { if ( parseFloat( $( this ).text() ) < 0 ) { $( this ).addClass( "highlight-negative" ); } }); }); </script>

  4. Now, you will see a much more interesting table with multiple visual cues:

How it works...

Select the <td> elements within the tbody tag's table rows that have a class of ratings.

For each iteration of the loop, test whether or not the value (text) of the <td> is greater than 10. Because the values in <td> contain non-numeric characters (in this case, % signs), we use JavaScript's parseFloat() to convert the text to actual numbers:

parseFloat( $( this ).text() )

Much of that should be review. $( this ) is a reference to the element in question. text() retrieves the text from the element. parseFloat() ensures that the value is numeric so that it can be accurately compared to the value 10.

If the condition is met, use addClass() to apply the highlight class to <td>. Do the same thing for the Delta column. The only difference is in checking to see if the text is less than zero. If it is, apply the class highlight-negative.

The end result makes it much easier to identify specific data within the table.


In this article we covered two recipes Show/hide rows and Highlighting cells.

Resources for Article :

Further resources on this subject:

Books to Consider

comments powered by Disqus