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>
¿Fue útil?

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