使用 jQuery 突出显示行答案

【问题标题】：Highlight row with jQuery使用 jQuery 突出显示行
【发布时间】：2011-01-09 05:22:33
【问题描述】：

我想要一个函数，当鼠标滑过它时，它会突出显示表格的行。我目前有一个函数可以每隔一行创建一个备用行颜色，我想修改它而不是创建一个单独的函数。这是我所拥有的：

$(".tblRows tr:even").addClass("altColor");

在哪里

.altColor TD {
background-color:#f5f5f5
}

我的 HTML 是

<table class="tblRows">
...

我知道有一个 jQuery 函数 hover() 但我不确定如何将它与我所拥有的结合起来。悬停时我希望它使用 class="hilite"

有可能吗？

【问题讨论】：

标签： jquery

【解决方案1】：

您是否有理由不为此使用 CSS？

#myTable tr:hover {
    background: orange;
}

在 IE6 中不适用于 <tr>，但可以在其他地方使用。

示例： http://jsfiddle.net/auWGU/

【讨论】：

【解决方案2】：

$('.tblRows tr')
    .mouseenter(function() { $(this).addClass('hilite'); })
    .mouseleave(function() { $(this).removeClass('hilite'); };

【讨论】：

谢谢@David，没注意到我忘记了。 @santa 我想你可以像其他人指出的那样使用.hover。我想这真的取决于你最喜欢什么。 :)
$(this) 不是 this，它需要是一个 jQuery 对象 JS Fiddle demo（我删除了原始评论，因为我想在一个演示链接中编辑为什么 this 需要成为$(this)，这就是为什么我被感谢的评论出现在感谢我的评论之后......）=）

【解决方案3】：

您需要悬停功能将鼠标悬停事件处理程序添加到表格中的每一行。例如：

$('.tblRows tr').hover(function () {
    $(this).toggleClass('hilite');
},
function () {
    $(this).toggleClass('hilite');
});

【讨论】：

【解决方案4】：

使用hover：

$(".tblRows tr").hover(function() {
    $(this).addClass("hilite");
}, function() {
    $(this).removeClass("hilite");
});

简写为：

$(".tblRows tr").mouseenter(function() {
    $(this).addClass("hilite");
}).mouseleave(function() {
    $(this).removeClass("hilite");
});

【讨论】：