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

If you’ve ever had to use sites that have dense tabular data, you know the pain of squinting or using your mouse to see if you’re following the right row or column. There are many tricks people have used over the years to make alternating rows and highlight rows hovered over. Thanks to jQuery, it’s super easy to add both functions on the client side.

Take this table:

This is a lightweight table structure styled with some simple CSS2-compliant css:

Making two jQuery statements using the :odd and :even selectors is a simple way to do this:
$(“table.friendly tr:not(.header):odd”).css(“background-color”, “#CFF”);
$(“table.friendly tr:not(.header):even”).css(“background-color”:, “#CFC”);

But if you want to create a hovering effect, you’ll need to make it able to recall the previous state. For that, we’ll make some functions that hold the CSS changing code to avoid repetition & make for easy future alterations. So we’ll move to using .index() instead of :odd and :even.

We start by telling every row in table.friendly to be styled according to tablerow() function, which checks the index and styles as needed. Then we add the hook to hover() to highlight by setting the background to red, the text color to white, and the font to bold. Since we’re changing the text color & font weight, we need to make sure we change those back on the normal state.

With this code, we get:

Note how we have the third data row highlighted.

You now have the building blocks to make your own friendlier tables using 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: jQuery, spreadsheet-style tables, tables,

Trackbacks/Pingbacks

  1.  jQuery Tip: Even Friendlier Tables with jQuery « Safari Books Online's Official Blog