>The solution i adopted was CSS (tr:hover) for non-IE6 and only allow >small tables to have hover-over using a class name to identify them. > >Any better solutions?
As some one else mentioned earlier in this thread, attach a listener to just the table element and then check to see if the element you're over needs the effect you require. This is much more efficient since you only attach the event listener to a single element. It means the listener itself has a little more work do to, but does require parsing thousands of elements. Someone even recently posted a plug-in to help handle this: http://jquery.com/plugins/project/intercept I've never tried the code (just now looked at it for the first time,) but it looks like you'd use it like this: $("#table") .intercept("mouseover",{ td: "delegate", tr: function (){ $(this).css("backgroundColor", "yellow"); } }) .intercept("mouseout",{ td: "delegate", tr: function (){ $(this).css("backgroundColor", "none"); } }); I didn't test the code, but that looks like what you'd need from the example page. So, instead of attaching event to every single <tr>, you attach it only the table element. Every time the mouse moves over an element in the table it'll fire off the code. It looks like the "delegate" command basically tells the intercept() method to pass control to the parent element. -Dan
