Question

我正在使用以下jQuery代码突出显示鼠标所在的行：

$("#rpt tr:has(td):not(.noHighlight)").hover(
    function() { $(this).css("background-color", "Silver"); },
    function() { $(this).css("background-color", "Transparent"); }
);

当我开始获得超过500行时，会有明显的延迟，因为颜色在光标后面约1/2秒。对于非常长的表，这会导致IE提供停止脚本，因为渲染需要很长时间。

是否有更好/更快的方法来实现可以处理大量行的影响？

Answer 1

如果你可以在想要突出显示的行上添加.highlight类，你可以像这样使用css：

tr.highlight {
    background-color: blue;
}

tr.highlight:hover
{
    background-color : red;
}

Answer 2

页面上的500行对于用户消化时间来说有点多。我建议通过使用分页来解决这个问题（一次只显示一下这个列表）

Answer 3

如果颜色变化缓慢是由jQuery搜索该怎么做引起的，那么这将有所帮助。现在你正在使用jQuery（“＃”）ID选择器，这太棒了。在一个大的页面/ dom上，你可以更进一步，你可以明确告诉限制jQuery的DOM搜索：

jQuery("tr:has(td):not(.noHighlight)","#rpt").hover(
    function() { $(this).css("background-color", "Silver"); },
    function() { $(this).css("background-color", "Transparent"); }
);

现在，你正在搜索整个dom的“#rpt”。第二个参数表达式告诉jQuery仅在第二个参数内开始搜索dom。

如何加速jQuery在许多元素上的事件

3 个答案: