Show/hide rows and Highlighting cells

Exclusive offer: get 50% off this eBook here
Instant jQuery 2.0 Table Manipulation How-to [Instant]

Instant jQuery 2.0 Table Manipulation How-to [Instant] — Save 50%

Enhance and add functionality with interactivity to your HTML tables with jQuery with this book and ebook.

$12.99    $6.50
by Charlie Griefer | April 2013 |

In this article by Charlie Griefer, author of Instant jQuery 2.0 Table Manipulation How-to [Instant], we will see two recipes Show/hide rows and Highlighting cells.

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

e.preventDefault();

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 (http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html), 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 td.delta" ).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.

Summary

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

Resources for Article :


Further resources on this subject:


Instant jQuery 2.0 Table Manipulation How-to [Instant] Enhance and add functionality with interactivity to your HTML tables with jQuery with this book and ebook.
Published: March 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Charlie Griefer

Charlie Griefer has been building websites and applications since 1996, which makes him 217 years old in Internet years.

A native of New Jersey, he moved to Phoenix in 1995, where he resided for 10 years before going on a whirlwind tour of the country in search of happiness or something similar. Short stints in Florida, California (lower), and California (upper) ultimately led to his return to Phoenix in 2010.

Charlie is currently a Senior Web Applications Developer at World Singles, where his day-to-day activities include CFML, Clojure, JavaScript, jQuery, MySQL, MongoDB, and grudgingly, some CSS.

When he's not in front of the computer working on code, he can be found in front of the computer playing with code.

When he's not in front of the computer at all, he enjoys spending time with his wife and three children, or trying to survive Krav Maga classes. He infrequently blogs at http://charlie.griefer.com/blog.

Books From Packt


Learning jQuery 1.3
Learning jQuery 1.3

jQuery UI Themes Beginner's Guide
jQuery UI Themes Beginner's Guide

Learning jQuery, Third Edition
Learning jQuery, Third Edition

 jQuery for Designers: Beginner’s Guide
jQuery for Designers: Beginner’s Guide

 jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

 jQuery Mobile First Look
jQuery Mobile First Look

jQuery UI 1.8: The User Interface Library for jQuery
jQuery UI 1.8: The User Interface Library for jQuery

jQuery Tools UI Library
jQuery Tools UI Library


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
g
x
u
9
W
U
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software