Selezione di una riga della tabella visibile ogni secondo

Question

Ho una tabella che mostra una struttura ad albero (Super e Sottocategorie). Quando l'utente fa clic su una supercategoria, la proprietà display dei child viene alternata.

Ora voglio aggiungere un colore di sfondo alternato su ogni seconda fila di tabelle, ma ovviamente tenendo conto solo di quelle che sono attualmente visibili. Ecco un esempio semplificato di struttura:

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

Quando l'utente clicca l'elemento "Super 2", le classi "nascondere" vengono rimossi dagli elementi secondari.

Ho provato diversi selettori, ad es .:

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

spero mi sono chiare su quello che voglio fare.

È possibile con i CSS o dovrei scrivere uno script JS che ricalchi le righe pari e dispari ogni volta che qualcosa cambia? Grazie in anticipo per eventuali suggerimenti!

Answer 1

Questo frammento di codice jQuery farà il lavoro:

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

giocare con lui sul jsFiddle

Answer 2

Hai detto che la classe hide viene rimossa onclick.
Mantenerlo semplice e aggiungere una classe IE: "mostra".

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

Edit:
darò la colpa exaustion, ma penso che questo potrebbe essere la sintassi corretta.

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

Answer 3

L'up-to-date e faster modo per fare il lavoro è:

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

Quindi è possibile ridimensionare quelle linee dispari in CSS con .odd {}