Some Background

A while ago, a smart guy that I know wrote a little post entitled "Adding Mouse Over Row Highlighting To Tables". In his post, Haacked showed us how to use Markup Based JavaScript Effect Libraries (via Jon Galloway) to add a little UI Goodness to your typically boring HTML Tables.

I recently decided to use this nice effect in a project for work, and ended up building it out to be more robust and play nice with others (other CSS styles, that is). So, in the spirit of the OSS movement, I thought I would share my new version of the "Mouse Over Row Highlighting Effect"... hence the Redux.

Problem with the Original

The original effect didn't take into account any existing CSS Class(es) that a given Table Row already had. This meant the script would toss those existing styles aside when assigning the onmouseover and onmouseout events to the Row.

This means that whenever you would move your mouse over a row, any existing styles would be stripped off and only the new "highlight" or "highlightAlt" style would be rendered.

See the Problem

To see the problem in action, check out The Original Example on this demonstration page. To help show the problem, I've added the "csharpCode" css class to each row in the table. This class shrinks the font size a small amount and change's its color to a dark red.

You'll notice that in The Original Example whenever we roll-over a row, that "csharpCode" style seems to be stripped off! However, The Redux Example maintains the "csharpCode" style and adds the rollover style. Sweet!

The Changes

The most important change was in how we attached the onmouseover and onmouseout events to each Table Row. What we need to do is add-items-to or remove-items-from each element's class attribute, rather than overwrite the attribute.

To do this, I built three new JavaScript methods: getClasses(e), addClass(e,c) and removeClass(e,c) -- where e is a DOM Element, and c is a CSS Class Name. If you take a look at those methods you'll notice that they rely on the JavaScript Array object's indexOf(item,start) method, and the String object's trim() method.

I also change the original initRowHighlightingOld() method to be a bit more efficient in how it collects the element with a "highlightTable" css class. To do this, I added the getElementsByClass(c,note,tagName) and hasClass(e,c) methods as well.

So many new methods...?

Fear not, all of the necessary methods can be found in this file (Right-click and "Save As") which is linked into the demo page via a script tag in the page's head section... and just like in the Original example, this is the only file you'll really need.

To Implement the Effect

Like the Original, the first thing you need to do is add the "highlightTable" css class to a table. Next add two style's to your stylesheet like so:

Finally you need to add a reference to a JavaScript file that has all of the Effect's methods. You can simply download and reference the mouseOverRowHighlight.js file as mentioned above, or you can follow a more modular approach.

I've split the methods that are specific to the Effect into their own file (tableEffects.js) and put the more generic methods into my site's common.js file. Feel free to grab both files and use them on your site!

See It In Action

I've built a demonstration page that shows (Haacked's) original effect on top, and my new Redux effect on the bottom. Go ahead and give them each a try!