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)')

jQuery突出显示表行但排除了一些行

3 个答案: