Выбор каждой второй строки видимой таблицы

Question

У меня есть таблица, отображающая древовидную структуру (супер- и подкатегории). Когда пользователь нажимает на суперкатегорию, свойство отображения дочерних элементов отправляется.

Теперь я хочу добавить чередующийся цвет фона для каждой второй строки таблицы, но, конечно, учитывать только те, которые в настоящее время видны. Ниже приведен упрощенный пример структуры:

<table> 
    <tr data-level="0"><td>Super 1</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 1</td></tr> 
    <tr data-level="0"><td>Super 2</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 2</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 3</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 4</td></tr> 
</table> 

Когда пользователь нажимает на элемент «Супер 2», классы «скрыть», удаляются из дочерних элементов.

Я попробовал несколько селекторов и т.д .:

/* Ugly result (dosn't recognize that elements are hidden) */ 
tr:nth-child(2n) 
{ 
    background-color: grey; 
} 

/* Doesn't work at all */ 
tr:visible:nth-child(2n) 
{ 
    background-color: grey; 
} 

/* Not what I inteded to do */ 
tr:not(.hide):nth-child(2n) 
{ 
    background-color: grey; 
} 

Я надеюсь, что стало ясно на то, что я хочу сделать.

Возможно ли это с помощью CSS или я должен писать сценарий JS, который перепрограммирует четные и нечетные строки всякий раз, когда что-либо изменяется? Заранее благодарим за любые подсказки!

Answer 1

Этот фрагмент кода JQuery сделает работу:

$('tr').removeClass('alternate')​ 
$('tr:not(.hide):odd').addClass('alternate')​ 

играть с ним на jsFiddle

Answer 2

Вы сказали, что класс hide удален onclick.
Сохраните это и добавьте класс IE: «показать».

.show tr:nth-child(odd) { background-color:#eee; } 
.show tr:nth-child(even) { background-color:#fff; } 

Edit:
Я виню exaustion, но я думаю, что это может быть правильный синтаксис.

tr.show:nth-child(odd) { background-color:#eee; } 
tr.show:nth-child(even) { background-color:#fff; } 

Answer 3

Повышающий актуальный и faster способ сделать работу является:

$('tr').removeClass(); 
$('tr:not(:hidden)').filter(':odd').addClass('odd'); 

Затем вы можете стилизовать эти нечетные строки в CSS с помощью .odd {}