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.

Answer 1

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