javascript - tabla - Filas Alternas CSS-algunas filas ocultas

ocultar td javascript

Question

Estoy tratando de diseñar una tabla para que cada fila sea de un color diferente (impar / par). Tengo el siguiente CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f9ff;
}

#woo tr:nth-child(odd) td {
    background-color: white;
}

Sin embargo, algunas de mis filas se pueden ocultar y todavía me gustaría que las filas se alternen. ¿Cómo puedo ajustar lo anterior para que tenga la apariencia de filas alternativas, incluso si las filas que están al lado de las demás no son necesariamente impares e incluso?

Answer 1

Dado que el "fenómeno de franja faltante" solo se produce si se oculta un número impar de filas, es posible que tenga que agregar una única fila de relleno invisible donde se oculte un número impar de filas.

Row 1
Row 2
Row 3 (hidden)
Padding (hidden)
Row 4
Row 5

Si esta es realmente una buena solución, depende en gran medida de su código actual, por ejemplo, cómo crea la tabla y cómo se ocultan las filas.

Pero si sus tablas son enormes y se ocultan grandes trozos de filas consecutivas, esto funcionaría mucho mejor que una solución Javascript / jQuery.

Answer 2

Este es un problema difícil, solo pasé un rato jugando con CSS2 y 3 selectores, y no estoy seguro de que estemos ahí todavía. Algo como esto debería ser posible, pero no funciona:

tr td {background-color:white;}
tr td:not([style="display:none"]):nth-of-type(even) {
    background-color:#f0f9ff;
}

<tr><td>1</td></tr>
<tr><td style="display:none">2</td></tr>
<tr><td>3</td></tr>

Parece que estás atascado con jQuery :visible extensión :visible (no CSS nativo), pero si se está ejecutando lentamente, definitivamente pagina las filas como dice @Ionut.

Answer 3

Me doy cuenta de que esto es súper tarde, pero hoy me encontré con el mismo problema y encontré una solución CSS pura utilizando una fórmula para nth-child . No sé si se ajusta a su escenario exacto, pero si todas las demás filas están ocultas pero aún necesita que las filas visibles alternen los colores, esto funciona muy bien. El selector CSS se ve así:

tr:nth-child(4n - 1) { background-color: grey; }

Aquí hay un violín que lo muestra en acción.

Esto hace que cada fila visible sea gris. Para obtener más información sobre cómo funcionan estas fórmulas, este es un excelente tutorial .

Answer 4

Resolví este problema usando una imagen de fondo para la tabla que consistía en los dos colores alternativos. Esto hace que no sea una solución totalmente CSS, ya que implica crear una imagen, pero debería escalar muy bien para tablas con miles de entradas.

La imagen de fondo en la codificación base64 a continuación es una imagen de 1x50 con los 25 píxeles superiores como un color y los 25 píxeles inferiores como color alternativo.

table {
  border-collapse: collapse;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=);
}
  
td {
   padding: 2px 4px;
   height: 21px;
}

<table>
    <tbody>
        <tr style="display: table-row;">
            <td>ANIMAL!!</td>
        </tr>
        <tr style="display: table-row;">
            <td>Beaker</td>
        </tr>
        <tr style="display: none;">
            <td>Bunsen Honeydew, Ph.D.</td>
        </tr>
        <tr style="display: table-row;">
            <td>Camilla the Chicken</td>
        </tr>
        <tr style="display: table-row;">
            <td>Dr. Julius Strangepork</td>
        </tr>
        <tr style="display: none;">
            <td>Dr. Teeth</td>
        </tr>
        <tr style="display: none;">
            <td>Floyd Pepper</td>
        </tr>
        <tr style="display: none;">
            <td>Gonzo</td>
        </tr>
        <tr style="display: table-row;">
            <td>Janice</td>
        </tr>
        <tr style="display: none;">
            <td>Miss Piggy</td>
        </tr>
        <tr style="display: none;">
            <td>Rizzo</td>
        </tr>
        <tr style="display: none;">
            <td>Robin the Frog</td>
        </tr>
        <tr style="display: table-row;">
            <td>Sam the Eagle</td>
        </tr>
        <tr style="display: table-row;">
            <td>Statler</td>
        </tr>
        <tr style="display: none;">
            <td>The Swedish Chef</td>
        </tr>
        <tr style="display: table-row;">
            <td>Waldorf</td>
        </tr>
        <tr style="display: none;">
            <td>Zoot</td>
        </tr>
    </tbody>
</table>

Answer 5

Si está utilizando jQuery, puede emplear una de sus funciones, por ejemplo .filter() , para elegir solo los elementos que son visibles. Pero la clave aquí es un selector de CSS :visible .

Por ejemplo (ver jsfiddle ):

jQuery(''tr:visible:odd'').css({''background-color'': ''red''});
jQuery(''tr:visible:even'').css({''background-color'': ''yellow''});

Answer 6

Si usa jQuery, puede adoptar el siguiente enfoque:

JavaScript

$("tr:odd").addClass("odd");

CSS

.odd {
   background: #ccc;
}

Fuente: http://css-tricks.com/snippets/jquery/jquery-zebra-stripe-a-table/