Cercando di Zebra stripe righe arbitrarie in una tabella
-
12-10-2019 - |
Domanda
Ho una tabella che ha le righe che sono contrassegnati da una classe. Queste righe dovrebbero essere zebra a strisce. L'avvertenza è che essi non sono sempre consecutivi.
ho cercato di corrispondenza dalla tabella e il nome della classe, ma il risultato finale è sempre corretto. Quello che sta accadendo è che la striping sarà applicata a livello di tabella e quindi abilitato solo sulle righe con la classe.
Che cosa devo cambiare per fare questo lavoro come intendo?
Script
function FormatTable()
{
$("#TableId .arbitrarySelector:nth-child(2n+1)" ).addClass('anotherEquallySpecialRow')
}
HTML
<table id="TableId" onclick="FormatTable()">
<tr class="arbitrarySelector">
<td><div class="space">Should be Changed and is</div></td>
</tr>
<tr class="arbitrarySelector">
<td><div class="space">Should Not be Changed and is Not</div></td>
</tr>
<tr class="arbitrarySelector">
<td><div class="space">Should be Changed and is</div></td>
</tr>
<tr>
<td><div class="space"></div></td>
</tr>
<tr class="arbitrarySelector">
<td><div class="space">Should NOT be changed but is</div></td>
</tr>
<tr>
<td><div class="space"></div></td>
</tr>
<tr class="arbitrarySelector">
<td><div class="space">Should be Changed and is</div></td>
</tr>
<tr>
<td><div class="space"></div></td>
</tr>
<tr>
<td><div class="space"></div></td>
</tr>
<tr class="arbitrarySelector">
<td><div class="space">Should Not be Changed and is Not</div></td>
</tr>
<tr class="arbitrarySelector">
<td><div class="space">Should be Changed and is</div></td>
</tr>
<tr class="arbitrarySelector">
<td><div class="space">Should Not be Changed and is Not</div></td>
</tr>
</table>
Soluzione
Si potrebbe essere fare questo troppo difficile. Se si vuole fare zebra striping, perché non utilizzare qualcosa come il : selettore dispari e il cambiamento la classe seconda. Qualcosa di simile a questo ...
// Add zebra striping.
$('.arbitrarySelector:odd').addClass('zebra');
E poi il CSS sarebbe qualcosa di simile ...
.zebra
{
background-color: #dddddd;
}