ansaurus

Question

jQuery Slowness With Large Table Row Highlighting

Answer 1

+2 A:

It's slow to add that many events, looks like two for every row. Instead, you need to use Event Delegation. You can role your own, or maybe that link will help. The basic idea is that you attach just one or two event handlers to the table itself, and within those event handlers, you look get the info of which row was entered and change the view accordingly.

DGM 2009-03-26 14:34:39

Yeah the delegation looks to be right, I can't seem to get it to work though.

Kezzer 2009-03-26 15:07:19

Answer 2

A:

Use EventDelegation, as suggested. Add an event listener on the table. and also
use explicit colors e.g. #dee9f3 (as opposed to "blue")
Assign styles directly, rather than through css switches e.g.

row.style.backgroundColor = '#dee9f3';

Joel 2009-03-26 14:46:25

Answer 3

A:

I'm pretty sure live makes use of event delegation. This might work depending on how flaky mouseover is.

try this:

$(document).ready(function() {
    $('tr', '#stocks')
    .not('.exclude')
    .css('cursor', 'hand')
    .find('td')
    .live("mouseover", function(){

          $(this).hover(function() {
          $(this).parent('tr').addClass('hover');  
        }, function() {
            $(this).parent('tr').removeClass('hover');
      $(this).unbind();  ////not sure about this part
        });
         $(this).trigger('hover');
    });
});

thirsty93 2009-03-26 15:00:28

It looked right, but doesn't seem to work. The hand cursor is working, however so it's almost there.

Kezzer 2009-03-26 15:05:14

try that, I think the hover isn't firing because it is bound too late

thirsty93 2009-03-26 15:20:14

Again, it's getting the cursor correct but not the background colour of the tr

Kezzer 2009-03-26 15:24:31

tried one more time. Put the live events on the td's, you may want to put the hover events on the tr if it is glitchy.

thirsty93 2009-03-26 15:32:25

Answer 4

+3 A:

This effect can be accomplished with CSS only. Try something like:

#stocks tr:hover {
   cursor: pointer;
   background-color: khaki;
}

#stocks tr.exclude:hover {
   cursor: inherit;
   background-color: inherit;
}

spoulson 2009-03-26 15:10:26

Any particular reason my solution was downvoted? Did it not work or solve the problem? I thought downvoting was for unhelpful answers.

spoulson 2009-03-26 15:27:24

IE6 wouldn't work though, and IE7 needs quite a specific doctype. It'd still be slow though, would it not?

Kezzer 2009-03-26 15:36:46

+1 back up for the idea, although the selectors aren't quite right (you want “#stocks tr:hover” and “#stocks tr.exclude:hover”) and the “inherit” won't work in IE (you'll have to specify explicit values). Also some hacking is needed to use ‘pointer’ on other browsers than IE instead of ‘hand’.

bobince 2009-03-26 15:38:13

@Kezzer: slow? native CSS will be much faster than loads of fiddly little event handlers. And you should be in Standards Mode already if you value your sanity! However IE6, indeed, won't :hover on tr.

bobince 2009-03-26 15:39:42

Oops, bobince is right on the selector and cursor setting. I fixed those. There was no stated requirement on old browsers or quirks mode. It degrades gracefully in IE6 by simply not providing the visual feedback, but not breaking functionality.

spoulson 2009-03-26 17:59:43

I've put the doctype that works for IE7 in my edit. The only other thing you could do is a check for < IE7 and implement some JS to do it for you. Our company has IE7 only now so this will work as long as we ensure the correct doctype is set. Thanks very much spoulson.

Kezzer 2009-03-27 10:07:57

Answer 5

+1 A:

Alright! This should do it:

$(document).ready(function() {
    $('tr:not(.exclude)', '#stocks')
    .css('cursor', 'hand')
    .live("mouseover", function() {
        $(this).addClass('hover');
    }).live("mouseout", function() {
        $(this).removeClass('hover');
    });
});

Paolo Bergantino 2009-03-26 15:15:09

that will not work mouseout fires when the pointer moves into or *out of* a *child* element

thirsty93 2009-03-26 15:22:22

i have a test table set up and it works on it just fine

Paolo Bergantino 2009-03-26 15:46:08

Have you tested it against 5,000 rows?

Kezzer 2009-03-26 15:54:55

Yes. More, in fact.

Paolo Bergantino 2009-03-26 15:57:03

Ah, perhaps this is an IE7 issue then? This is an internal site, we're only allowed to use IE7 *shudder*. I'm not a fan myself, but hey, requirements are requirements.

Kezzer 2009-03-26 16:01:52

I tested it on IE7 and it is decent. Not as snappy as Firefox but that's IE. However, if this is IE7 only, why not use @spoulson's answer? CSS should definitely blow JS out of the water.

Paolo Bergantino 2009-03-26 16:04:55

Aye, I had tried that and it was equally as slow as JS. I think I may be missing something here as I'm not sure why.

Kezzer 2009-03-26 16:05:55

ansaurus

tags:

views:

answers:

jQuery Slowness With Large Table Row Highlighting

related questions