Selección de cada segunda fila de la tabla visible

Tengo una tabla que muestra una estructura de árbol (Super- y Subcategorías). Cuando el usuario hace clic en una supercategoría, la propiedad de visualización de los elementos secundarios se alinea.Selección de cada segunda fila de la tabla visible

Ahora quiero agregar un color de fondo alterno en cada segunda fila de la tabla, pero por supuesto solo teniendo en cuenta aquellos que están actualmente visibles. A continuación se muestra un ejemplo simplificado de la estructura:

<table> 
    <tr data-level="0"><td>Super 1</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 1</td></tr> 
    <tr data-level="0"><td>Super 2</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 2</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 3</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 4</td></tr> 
</table>

Cuando el usuario hace clic en el elemento de "Super 2", las clases "ocultar" se eliminan de los elementos secundarios.

He probado varios selectores, ej .:

/* Ugly result (dosn't recognize that elements are hidden) */ 
tr:nth-child(2n) 
{ 
    background-color: grey; 
} 

/* Doesn't work at all */ 
tr:visible:nth-child(2n) 
{ 
    background-color: grey; 
} 

/* Not what I inteded to do */ 
tr:not(.hide):nth-child(2n) 
{ 
    background-color: grey; 
}

espero Tengo claro en lo que quiero hacer.

¿Es posible con CSS o debería escribir un script JS que recalcula las filas pares e impares cada vez que algo cambia? ¡Gracias de antemano por cualquier pista!

Fuente

2012-03-11 Oromis

Esto se pregunta mucho - la respuesta típica es que no es posible con CSS puro (hasta CSS4 tal vez), por lo que tendrás que hacer todo esto en JS. De hecho, el selector ': visible' es realmente un selector no estándar que aparece en jQuery/Sizzle y tal vez en un par de otras bibliotecas. – BoltClock

posible duplicado de [Estilo usando nth-child para mantener actualizado el aspecto de la tabla (alternando colores de filas)] (http://stackoverflow.com/questions/9216398/style-using-nth-child-to-keep-tables-aspect- alternating-row-colors-updated) – BoltClock

Este fragmento de jQuery hará el trabajo:

$('tr').removeClass('alternate') 
$('tr:not(.hide):odd').addClass('alternate')

jugar con él en el jsFiddle

Fuente

2012-03-11 17:08:32

¿De dónde viene la clase 'alternate'? –

Dijiste que la clase de ocultación se elimina al hacer clic.
Mantenlo simple, y agrega una clase IE: "mostrar".

.show tr:nth-child(odd) { background-color:#eee; } 
.show tr:nth-child(even) { background-color:#fff; }

Editar:
me culparán exaustion, pero creo que esto podría ser la sintaxis correcta.

tr.show:nth-child(odd) { background-color:#eee; } 
tr.show:nth-child(even) { background-color:#fff; }

Fuente

2012-03-11 17:04:35 Bradmage

Esto falla de manera similar a la tercera regla en el código de OP. Vea el posible enlace duplicado que acabo de agregar. – BoltClock

No he tenido la oportunidad de probar lo anterior todavía. Pero la diferencia es que mi respuesta asume la capacidad de agregar la clase "mostrar" a los TR apropiados, basados en "... las clases" ocultar "se eliminan ..." Lo que estoy seguro es que debería solucionar el problema usando " tr: not (.hide): nth-child ". Definitivamente curioso, Voy a verlo más esta noche. – Bradmage

El hasta a la fecha y faster manera de hacer el trabajo es:

$('tr').removeClass(); 
$('tr:not(:hidden)').filter(':odd').addClass('odd');

Luego puede diseñar esas líneas impares en CSS con .odd {}

Fuente

2014-12-08 07:43:43 lapin

¿De dónde viene la clase 'impar'? –

@ BernhardDöbler Acabo de actualizar la respuesta. La pregunta es sobre "seleccionar" cada segunda línea visible, que se realiza con: '$ ('tr: not (: hidden)'). Filter (': odd')'. Luego, simplemente agrego una clase ".odd" a esas líneas para poder diseñarlas fácilmente en CSS. La respuesta elegida hace lo mismo, pero es menos eficiente. – lapin

Selección de cada segunda fila de la tabla visible

Respuesta

Cuestiones relacionadas