JQuery Selector For Table With Hidden Row - Alternate Row Colouring

I have a table, and usually i use this selector to apply odd and even row: table.find('tbody tr:even').addClass('even'); table.find('tbody tr:odd').removeClass('even'); My Table h

Solution 1:

use the :visible selector

table.find('tbody tr.even').removeClass('even');
table.find('tbody tr:visible:even').addClass('even');

Remember to use it first so that the :even filter applies after it.

Solution 2:

Try this out:

table.find('tbody tr').removeClass('even')
    .filter(':visible:even').addClass('even');

Solution 3:

Use a :not(:hidden) selector

table.find('tbody tr:not(:hidden):even').addClass('even');

Solution 4:

You can use the :visible selector to only markup visible row:

table
    .find('tbody tr:visible:even')
    .addClass('even')
.end()
    .find('tbody tr:visible:odd')
    .removeClass('even');
.end();