views:

586

answers:

2

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.

+1  A: 

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.

edeverett
Updated the question - 90% of users are ie6
redsquare
In that case I think using event delegation is probably as good as it gets. If you still need better performance you could try not using jQuery or even an .htc behaviour file for IE6. Unfortunately IE6 + tables + js = performance problems :-(
edeverett
A: 

The solution from my question is the fastest implementation - using native event delegation.

redsquare
wow, marking your own post as correct...
Doomspork
If you think you can think of a better solution be my guess. However I guess the fact you have not means your incapable to do so:)
redsquare