jQuery突出显示表格行但不包括某些行答案

【问题标题】：jQuery highlight table row but excluding some rowsjQuery突出显示表格行但不包括某些行
【发布时间】：2013-10-18 03:20:39
【问题描述】：

我有以下代码：

$('table tr:not(:first-child)').mouseover(function() {
    $(this).removeClass('hovered_error');
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});

这很好用 - 但是，有没有办法让我不突出显示某些表格行，例如第 11 行和第 21 行，或者如果表格行有特定的 name 或 @ 987654323@?

编辑：正确代码如下：

$('table tr:not(:first-child,[name=header])').mouseover(function() {
    $(this).removeClass('hovered_error');
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});

【问题讨论】：

$('table tr:not(:eq(10),:eq(20))')... 因为 eq 适用于基于 0 的索引
:not 也可以应用于类:not(.class) 或:not([name=somerandomnamelol])
@Spokey - 这是正确的吗？ '$('table tr:not(:first-child),:not([name=header])').mouseover(function() {'
$('table tr:not(:first-child, [name=header])') 应该做的伎俩或尝试链接他们$('table tr:not(:first-child):not([name=header])')
@Spokey - 在答案中弹出它，我会标记为已回答！

标签： jquery html-table highlight tablerow

【解决方案1】：

对于某些行号，您可以使用这些方法；

$('table tr:not(:first-child)').mouseover(function() {
    var hovered = $(this);
    if (hovered.index() != 11 && hovered.index() != 21) {
        hovered.removeClass('hovered_error');
        hovered.addClass('hovered');
    }
}).mouseout(function() {
    hovered.removeClass('hovered');
});

检查元素的index()。如果要跳过第一行，可能需要调整索引 +1 或 2。

【讨论】：

我应该提到 - 我有一些显示和隐藏的表格行 - 虽然上述工作正常 - 显示隐藏似乎会影响它。
您的意思是因为某些行可能被隐藏，您只希望可见的第 11 或 21 行不受影响，而不是表的第 11 或 21 行，无论它们的可见性如何...如果有道理吗？

【解决方案2】：

如果您只想将 Hover CSS 行为添加到表格 Rows，那么您可以仅使用 CSS 来完成

table tr {
        background-color: azure;
    }
    table tr:hover {
        background-color: beige;
    }

【讨论】：

【解决方案3】：

如评论中所述，您可以将classes 或属性过滤器添加到:not

$('table tr:not(:first-child, [name=header], #id, .class)')

【讨论】：