Tratando de filas arbitrarias raya de la cebra en una tabla
-
12-10-2019 - |
Pregunta
Tengo una tabla que tiene filas que están etiquetadas por una clase. Estas filas se deben a rayas de cebra. La advertencia es que no siempre son consecutivos.
He tratado correspondiente por mesa y nombre de la clase, pero el resultado final es siempre incorrecto. Lo que ocurre es que la creación de bandas se aplicará a nivel de tabla y luego activa sólo en las filas con la clase.
¿Qué tengo que cambiar para que esto funcione como pretendo?
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>
Solución
podría estar haciendo esto también difícil. Si usted quiere hacer las rayas de cebra, ¿por qué no usar algo como el : selector de extraña y el cambio dependiendo de la clase. Algo como esto ...
// Add zebra striping.
$('.arbitrarySelector:odd').addClass('zebra');
Y a continuación, el CSS sería algo así como ...
.zebra
{
background-color: #dddddd;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow