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 has rows being inserted at various places, hence why i remove it from the odd rows.

I now have certain rows hidden using

jQueryTrObject.hide();

I want to apply the same styling as before, so that alternate rows, as far as the user is concerned are marked up odd and even, and i'd like it to take into account of hidden rows.

How do i write a selector to do this, for do i have to use the each and specifically check?

回答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.

回答2:

Try this out:

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

回答3:

Use a :not(:hidden) selector

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

回答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();

来源：https://stackoverflow.com/questions/4853063/jquery-selector-for-table-with-hidden-row-alternate-row-colouring