大表行突出显示的jQuery慢度
[英]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. 
我有这个小片段，用于在XSLT页面上突出显示行，该行必须使用onclick事件回传一些数据，但是由于该行不是链接，因此我必须确保有一个手形光标以及该行将突出显示，以便用户理解它是可单击的，以及他们所在的行。
<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. 这些表很大，通常最多5000行。 When there's a large amount of rows the row highlighting used by this jQuery script goes quite slow. 当有大量行时，此jQuery脚本使用的行突出显示速度很慢。 I wrote the tr:not(.exclude) selector, but I'm thinking perhaps that's what's causing it to go slow? 我写了tr:not(.exclude)选择器，但我想这可能是导致它变慢的原因吗？ 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. 编辑 ：我看到许多答案都很好，但是它们并没有解决至少有5,000行以上的事实。
EDIT EDIT : You MUST ensure that IE7 at least has the following doctype set in order for tr:hover to work. 编辑编辑 ：必须确保IE7至少设置了以下doctype才能使tr：hover正常工作。 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 个解决方案
解决方案1
3 已采纳 2009-03-26 15:10:26
This effect can be accomplished with CSS only. 这种效果只能用CSS来实现。 Try something like: 尝试类似：
#stocks tr:hover {
cursor: pointer;
background-color: khaki;
}
#stocks tr.exclude:hover {
cursor: inherit;
background-color: inherit;
}
解决方案2
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. 基本思想是，您仅将一个或两个事件处理程序附加到表本身，并且在这些事件处理程序内，您将看到获得输入了哪一行的信息并相应地更改视图。
解决方案3
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');
});
});
解决方案4
0 2009-03-26 14:46:25
- Use EventDelegation, as suggested. 按照建议使用EventDelegation。 Add an event listener on the table. 在表上添加一个事件侦听器。 and also 并且
- use explicit colors eg #dee9f3 (as opposed to "blue") 使用明确的颜色，例如＃dee9f3（与“蓝色”相对）
- Assign styles directly, rather than through css switches eg 直接分配样式，而不是通过CSS开关进行分配，例如
row.style.backgroundColor = '#dee9f3'; row.style.backgroundColor ='＃dee9f3';
解决方案5
0 2009-03-26 15:00:28
I'm pretty sure live makes use of event delegation. 我很确定live会利用事件委托。 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');
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.