Css coloring table problem

Question

He intentado hacer una tabla coloreada con filas pares de un color diferente al de las impares. El único problema que tengo es que tengo que poder hacerlo incluso con filas ocultas, porque si por ejemplo oculta la fila 2, verá la fila 1 y la fila 3 del mismo color.

Esto es lo que tengo:

tr:not([display="none"]):nth-child(even){ 
    background: #EFEFFF; 
} 
tr:not([display="none"]):nth-child(odd){ 
    background: #E0E0FF; 
} 

Este código no funciona para mí ya que los navegadores no filtran: no e: nth-child de acuerdo con el orden dado. ¿Alguna sugerencia?

Answer 1

¿Es posible añadir una clase a las filas visibles por lo que podría escribir como:

tr.visible:nth-child(even) { 
    background: #EFEFFF; 
} 
tr.visible:nth-child(odd){ 
    background: #E0E0FF; 
} 

Entonces usar jQuery para añadir/quitar la clase como hacer filas visible/invisible?

Answer 2

Terminó aquí mientras trataba de resolver un problema similar. Usó el siguiente JS para actualizar el CSS basado en una clase agregada después del filtrado.

$('tr.visible').filter(':odd').css('background-color', '#EFEFFF'); 
$('tr.visible').filter(':even').css('background-color', '#E0E0FF'); 

Nota los colores volteado debido a cero matrices indexadas.