Table Row and Column Highlighting

Published
May 4, 2010
by
Chris Coyier

In mid-2009 I did a screencast about tables which featured how to do row and column highlighting with jQuery. The method in the video isn't nearly as efficient as it could be, so this is an update to that. Shout out to Bronislav Klucka who contacted me about the idea.

Attaching events to table cells is the quintessential example, and also read like a history for event handling in jQuery.

Original demo (version < jQuery 1.3 ) - Using .hover() on every single <td>

HTML of typical table

Let's assume this markup. There are five columns, and so there are five <colgroup>s. Colgroups allow us to style an entire column without needing to manipulate individual table cells (as table cells in a particular column share no common unique parent).

CSS

Nothing much to see here, just that we will have a class name ready to handle the actual styling of "current" rows and columns.

.hover { background-color: #eee; }

It's best to handle the actual styling information through CSS rather than directly in the JavaScript.

You gotta keep 'em separated

- Offspring

Best Method: Delegate

For jQuery 1.4.2+, the best bet is going to be delegate. Here is the two second overview. You attach a single event listener (efficient!) to the table itself specifying which elements qualify. If anywhere inside the table is clicked, it checks if that click was inside one of the specified elements. If there is a match, it fires the function.

Our "do stuff" is applying a class name to the row and colgroup, when they are "hovered" over only. "hover" isn't a real event though, the real events are mouseover and mouseleave. Delegate will take a space-separated list of events. Within the function we can test which type of even was fired and act accordingly.

Since delegate is watching the entire table, if new table rows/cells are added dynamically later, they will still behave with this code.

Still good method: Live

Post jQuery 1.3, but pre jQuery 1.4.2, the best method for event handling in a situation like this was .live(). Remember how with delegate we watched the table itself for the specified events? With live, we watch the entire <body> for those events. This has the distinct benefit of allowing new rows/cells to be added dynamically without the need to re-attach events, but with less efficiency than delegate.

However it should be noted that should entire new table be added to the page dynamically, live would continue to work while delegate would not, as the new table would not have delegate attached to it.

The old and kinda bad method

Before we had access to live or delegate, or only method was to bind the events directly every single table cell. jQuery still had a helper function for it, but it still meant adding an event listener for every single solitary cell (inefficient!, e.g. lots of browser memory usage). Not to mention that if new table rows or cells were added dynamically, they wouldn't have any of the events attached them that their brethren do.

Interesting how after you’ve hovered over the tr, jQuery the leaves the empty class=”” in the markup. I can’t see that this is any type of problem. It just seems that maybe jQuery isn’t cleaning up completely. Or is that best practice?

if you want to avoid highlighting the first column just add
&& $(this).index() > 0
to your if clause, e.g.
if (e.type == ‘mouseover’ && $(this).index() > 0)

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.