JQuery - Grid Row Highlighting Best Practise

Question

I am looking for the best performing script for providing a hover state to rows within a grid.

90% of users have ie6 clients therefore I cant rely on css :hover

The grid is a standard table, some cells have inner tables.

I originally started using the .live method with mouseover and mouseout, however this has massive cpu implications when moving the mouse over the parts of the page without the grid as the event is delegated to the document mouseover.

I do not want to bind to each individual tr.

At present I am using event delegation on the tbody and use the .parents method to get the last table row in the targets node tree. I cant use closest('tr') for this reason.

Rough Current implementation :

//event hookup
$('table.grid>tbody')
     .mouseover(rowenter)
     .mouseout(rowleave);

function rowenter(ev){
   ev.stopPropagation();
   var $parentTr = $(ev.target).parents('tr:last');
   if ( ! $parentTr.is('.hover') ){
        $parentTr.addClass('hover');
   }
}

Any better implementations welcomed.

Why are they still using IE6? What a waste of time. The less people that write pages to be compatible with IE6, the better. Kick these people into the future. — Sneakyness
government users, would cost £millions to facilitate the upgrade — redsquare
Actually, I didn't down vote this but I do appreciate you going and down voting all of my questions & answers :) — doomspork

edeverett edeverett · Accepted Answer · 2009-07-03T13:38:38

On all modern browsers apart from IE6 you can do this with CSS:

tr:hover (background-color:yellow)

This should get around all the performance issues.

JQuery - Grid Row Highlighting Best Practise

2 Answers