CODEWITHSUNDEEP
jqueryhtml-tablehighlighttablerow
Homer_J
Homer_J

Reputation: 3323

jQuery highlight table row but excluding some rows

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

Upvotes: 0

Views: 496

Answers (3)

Spokey
Spokey

Reputation: 10994

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

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

Upvotes: 1

Ravi
Ravi

Reputation: 853

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;
    }

Upvotes: 1

Novocaine
Novocaine

Reputation: 4786

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.

Upvotes: 1

Related Questions