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

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

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

<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», «скрытые» классы удаляются из дочерних элементов.

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

/* 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, который пересчитывает четные и нечетные строки всякий раз, когда что-либо изменяется? Заранее спасибо за любые подсказки!