Posted on by & filed under Content - Highlights and Reviews, Web Development.

Previously, we talked about a simple way to add some user-friendly highlighting & alternating rows to a table. We’ll go further, causing columns to highlight as well. For this, we’ll make good use of .closest() and .index().

First, we’ll put the CSS changes as variables, since we’ll want to call them more often than we did before:

We’ll keep the row hover logic as-is, and add a hover() trigger on the table cells as well to alter the column. This way, we don’t run into conflicts as the user hovers over different columns and rows.

Now we’ll change table row highlighting, collapsing everything down to smaller code:

Of course, if you’re looking to add additional functionality upon highlighting, you might want to keep the structure from before.

Finally, we’ll put the column highlighting code in. In $(document).ready():

With new functions:


With rowcss_clear, we’re able to set and unset the cells on a column independently of the row, making a seamless transition.

You now have more ways of customizing the look of your tables with the help of jQuery.

Safari Books Online has the content you need

Check out these jQuery books available from Safari Books Online:

Want to add more interactivity and polish to your websites? Discover how jQuery can help you build complex scripting functionality in just a few lines of code Head First jQuery shows you how to navigate HTML documents while handling events, effects, callbacks, and animations. By the time you’ve completed the book, you’ll be incorporating Ajax apps, working seamlessly with HTML and CSS, and building your own plug-ins.
jQuery in Action, Second Edition is a fast-paced introduction and guide. It shows you how to traverse HTML documents, handle events, perform animations, and add Ajax to your web pages. The book’s unique “lab pages” anchor the explanation of each new concept in a practical example.
With these recipes, you’ll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces. Ideal for newcomers and JavaScript veterans alike, jQuery Cookbook starts with the basics and then moves to practical use cases with tested solutions to common web development hurdles.

About the Author

  Ryan Macklin is freelance front-end developer, specializing in jQuery, JavaScript, PHP, HTML and CSS. He spends his off-hours as a freelance writer, editor and game designer, and maintains a blog revolving around game design and being a freelance writer & editor at http://RyanMacklin.com.

Tags: highlight columns, jQuery, tables,

2 Responses to “jQuery Tip: Even Friendlier Tables with jQuery”

  1. Goran Jakovljevic

    Thanks, you made mine 100+ lines of code ive written to change huge table columns color on table head hover, to now only 20 lines.. awesome article.

Trackbacks/Pingbacks

  1.  thhresources.com » Blog Archive » jQuery – Safari Books Online's Official Blog