jQuery 缓慢与大表行突出显示

标签 jquery

我有一个小片段,用于在 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">

最佳答案

这种效果只能用 CSS 来实现。尝试这样的事情:

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

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

关于jQuery 缓慢与大表行突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/686012/

相关文章:

javascript - 使用 JQuery 比较小时和日期

javascript - jQuery Bounce Effect on click 没有 jQuery UI

javascript - 具有多个 ID 的引用 URL?

javascript - 获取数组中所有选中复选框对应的值

javascript - 使用 Javascript 的三级面板菜单,无法正确加载内容

javascript - 当容器文本中的最后一个文本行达到目标边距时,如何重新启动滚动标记?

javascript - jquery 在树中查找下一个/上一个

jquery - 根据屏幕大小删除 CSS 类 jQuery

javascript - 如何在 jQuery 事件处理程序中存储和重用超时?

javascript - 使 JSTree 响应