大表行突出显示的jQuery慢度
[英]jQuery Slowness With Large Table Row Highlighting
问题描述
我有这个小片段，用于在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>
这些表很大，通常最多5000行。 当有大量行时，此jQuery脚本使用的行突出显示速度很慢。 我写了tr:not(.exclude)选择器，但我想这可能是导致它变慢的原因吗？ 关于如何加快速度的任何想法？
编辑 ：我看到许多答案都很好，但是它们并没有解决至少有5,000行以上的事实。
编辑编辑 ：必须确保IE7至少设置了以下doctype才能使tr：hover正常工作。 我的速度仍然很慢，但是这必须归结为其他原因。
<!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
这种效果只能用CSS来实现。 尝试类似：
#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
添加这么多事件的速度很慢，每行看起来像两个事件。 相反，您需要使用事件委托 。 您可以扮演自己的角色，或者该链接会有所帮助。 基本思想是，您仅将一个或两个事件处理程序附加到表本身，并且在这些事件处理程序内，您将看到获得输入了哪一行的信息并相应地更改视图。
解决方案3
1 2009-03-26 15:15:09
好的！ 应该这样做：
$(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
- 按照建议使用EventDelegation。 在表上添加一个事件侦听器。 并且
- 使用明确的颜色，例如＃dee9f3（与“蓝色”相对）
- 直接分配样式，而不是通过CSS开关进行分配，例如
row.style.backgroundColor ='＃dee9f3';
解决方案5
0 2009-03-26 15:00:28
我很确定live会利用事件委托。 这可能有效，具体取决于鼠标悬停的方式。
尝试这个：
$(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');
});
});
jQuery Table行高亮查询
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.