jQuery Slowness With Large Table Row Highlighting
Question
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">
5 answers
solution1
3 ACCPTED 2009-03-26 15:10:26
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;
}
solution2
2 2009-03-26 14:34:39
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.
solution3
1 2009-03-26 15:15:09
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');
});
});
solution4
0 2009-03-26 14:46:25
- Use EventDelegation, as suggested. Add an event listener on the table. and also
- use explicit colors eg #dee9f3 (as opposed to "blue")
- Assign styles directly, rather than through css switches eg
row.style.backgroundColor = '#dee9f3';
solution5
0 2009-03-26 15:00:28
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');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.