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

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>

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

Я пробовал несколько селекторов, например ::100100

/* 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

Вы сказали, что класс скрытия удаляется по клику.Будьте проще и добавьте класс IE: "show".

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

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

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

Answer 2

Этот фрагмент jQuery выполнит свою работу:

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

Поиграйте с ним на jsFiddle

Answer 3

Современный и более быстрый способ выполнить работу:

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

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