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

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

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

.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; }