CODEWITHSUNDEEP
jquery
Kieran Senior
Kieran Senior

Reputation: 18220

jQuery Slowness With Large Table Row Highlighting

I've got this little snippet that I use for row highlighting on an XSLT page that has to use an onclick event to postback some data, but because the row isn't a link I have to make sure there's a hand cursor as well as the row being highlighted so the users understand it's clickable and what row they're on.

<script type="text/javascript">
  $(document).ready(function() {
    $('#stocks tr:not(.exclude)').css('cursor', 'hand');
    $('#stocks tr:not(.exclude)').hover(function() {
      $(this).addClass('hover');
    }, function() {
      $(this).removeClass('hover');
    });
  });
</script>

The tables are large, typically up to 5000 rows. When there's a large amount of rows the row highlighting used by this jQuery script goes quite slow. I wrote the tr:not(.exclude) selector, but I'm thinking perhaps that's what's causing it to go slow? Any ideas on how to speed this up?

EDIT: I see many answers are very good, however they do not address the fact of there being over 5,000 rows at least.

EDIT EDIT: You MUST ensure that IE7 at least has the following doctype set in order for tr:hover to work. Mine still goes slow, however this must be down to something else.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Upvotes: 2

Views: 2655

Answers (5)

spoulson
spoulson

Reputation: 21591

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;
}

Upvotes: 3

thirsty93
thirsty93

Reputation: 2652

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');
    });
});

Upvotes: 0

Paolo Bergantino
Paolo Bergantino

Reputation: 488404

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');
    });
});

Upvotes: 1

Joel
Joel

Reputation: 30156

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

row.style.backgroundColor = '#dee9f3';

Upvotes: 0

DGM
DGM

Reputation: 26979

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.

Upvotes: 2

Related Questions