jquery - jQuery突出显示表格行但不包括某些行

Question

我有以下代码：

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

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

编辑：正确的代码如下：

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

Answer 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。

Answer 2

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

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

Answer 3

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

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