resalte jquery cada segunda fila de la tabla - jquery, row, resaltado

Hola chicos, acabo de empezar con jquery, me pregunto cómo resolver ese problema:

Intento resaltar cada fila de la tabla haciendo clic en la casilla de verificación, todo está bien, excepto que solo se resalta cada segunda fila.

    $("tr").on("click",":checkbox", function () {
if($(this).is(":checked")) {
$(this).closest("tr").addClass("highlighted");
} else {
$(this).closest("tr").removeClass("highlighted");
}

Encontré ese enlace css adjunto causa este problema Desafortunadamente no puedo ignorarlo. Intenté también alternar clase pero sin éxito.

¿Cómo puedo resaltar cada fila marcada en una tabla con el uso del archivo css mencionado anteriormente?

Respuestas

Parece que el api puro, tiene una regla de precedencia más alta .pure-table-striped tr:nth-child(2n-1) td{} que establece el color de fondo, por lo que su regla queda anulada por esa regla. La solución es afinar tu regla como

.highlighted, .pure-table-striped tr.highlighted td {
background-color: rgba(0, 255, 0, 0.7);
}

Manifestación: Violín

¿Puede publicar todas las reglas de su hoja de estilo css que pueden afectar la representación de filas en su página?

Si tienes algún código que te de una even / odd clase a cada fila, una forma de tener la highlighted regla se aplican con mayor prioridad que la even / odd La regla es especificarla dos veces, por ejemplo. :

//replace
tr.highlighted { background-color: purple }

//with
tr.even.highlighted, tr.odd.highlighted { background-color: purple }