jQuery highlight table row but excluding some rows

Question

I have the following code:

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

This works great - however, is there is way in which I can not highlight certain table rows, for example, rows 11 and 21 or if a table row has a particular name or class?

EDIT: Correct code as follows:

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

Answer 1

As mentioned in the comment you can add classes or attribute filters to :not

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

Answer 2

You could use something along these lines for certain row numbers;

$('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');
});

Check against the index() of the element. You may need to adjust the index +1 or 2 if you want to skip the first row.

Answer 3

If you only want to add Hover CSS behavior to your table Rows then you can do it with CSS only

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