Question

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

Answer 1

这种效果只能通过CSS实现。尝试类似：

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

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

Answer 2

添加许多事件的速度很慢，每行看起来都是两个。相反，您需要使用Event Delegation。你可以自己角色，也许这个链接会有所帮助。基本的想法是，您只需要将一个或两个事件处理程序附加到表本身，在这些事件处理程序中，您可以查看输入了哪一行的信息并相应地更改视图。

Answer 3

好的！这应该这样做：

$(document).ready(function() {
    $('tr:not(.exclude)', '#stocks')
    .css('cursor', 'hand')
    .live("mouseover", function() {
        $(this).addClass('hover');
    }).live("mouseout", function() {
        $(this).removeClass('hover');
    });
});

Answer 4

按照建议使用EventDelegation。在表上添加事件侦听器。还有
使用明确的颜色，例如＃dee9f3（与“蓝色”相反）
直接指定样式，而不是通过css开关 e.g。

row.style.backgroundColor ='＃dee9f3';

Answer 5

我很确定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慢与大表行突出显示

5 个答案: