JMiur [E]

El uso de TBODY y COL para agrupar filas o columnas en una tabla también nos permite mostrar y ocultar sectores de forma dinámica.

Para dar un ejemplo, otra vez nos encontramos frente al dilema: ¿para qué navegador?

En términos generales, para ocultar un elemento se utiliza:
getElementById('nombre').style.display='none';
y para restaurarlo:
getElementById('nombre').style.display='';
Esto es cierto para las filas pero no para las columnas de una tabla, Internet Explorer lo acepta pero Fierefox y el resto de los navegadores que adoptan los criterios de la www.w3.org incorporan un nuevo estado para la propiedad visibility para filas, columnas o grupos:
visibility:collapse
que permite que todo el elemento sea removido y el espacio que ocupaba quede libre.

En este ejemplo las columnas utilizan este valor y las filas el valor display:none por lo tanto, en Internet Explorer, las columnas no podrán ocultarse:




ANIMALESleónperro
VEGETALEScebollamanzana
MINERALESesmeraldagranito
<table border=0>

<col width=ancho />
<col width=ancho id="col1" />
<col width=ancho id="col2" />
<col width=ancho id="col3" />

<tbody style="text-align:center;">
<tr>
<td></td>
<td>
<img src="imagen" onclick="getElementById('col1').style.visibility='collapse';">
</td>
<td>
<img src="imagen" onclick="getElementById('col2').style.visibility='collapse';">
</td>
<td>
<img src="imagen" onclick="getElementById('col3').style.visibility='collapse';">
</td>
</tr>
</tbody>

<tbody style="text-align:center;" id="anima">
<tr>
<td>
<img src="imagen" onclick="getElementById('anima').style.display='none';">
</td>
<td>ANIMALES</td>
<td>león</td>
<td>perro</td>
</tr>
</tbody>

<tbody style="text-align:center;" id="vegeta">
<tr>
<td>
<img src="imagen" onclick="getElementById('vegeta').style.display='none';">
</td>
<td>VEGETALES</td>
<td>cebolla</td>
<td>manzana</td>
</tr>
</tbody>

<tbody style="text-align:center;" id="minera">
<tr>
<td>
<img src="imagen" onclick="getElementById('minera').style.display='none';">
</td>
<td>MINERALES</td>
<td>esmeralda</td>
<td>granito</td>
</tr>
</tbody>

</table>
REFERENCIAS:
  • w3.org Tablas
  • 5 comentarios:

    John Mistery Doe  

    Hola JMiur, estoy buscando la manera de darle el estilo cebra a mis tablas, e visto que es posible hacerlo mediante CSS pero en IE no funciona, también e leído que se puede hacer con un script pero ese post fue publicado hace mucho tiempo. Podrías asesorarme un poco sobre el tema? Saludos!

    Responder
    JMiur  

    Las tablas siguen siendo tablas desde hace años así que nada ha cambiado. No sé que tipo de propiedades quieres colocar ni cual es el ejemplo al que te refieres.

    Responder
    John Mistery Doe  

    Me refiero a que la tabla tenga dos colores, que las filas impares sean de distinto color que las pares. Se podría hacer manualmente pero mi intención es ir agregando nuevos enlaces y ordenarlos alfabéticamente a medida que voy publicando nuevas entradas. He leído que hay un script de Jquery que hace esto pero no lo encuentro por ninguna parte.

    Responder
    JMiur  

    Sigo sin saber qué propiedades aplicas para determinar si una fila es par o impar; si es nth-child o algo similar, no funciona en IE (no sé si lo hace en IE9)

    El script al que te refieres no sabría decirte cual es.

    Responder
    John Mistery Doe  

    Si, es nth-child pero como bien as dicho no funciona en IE, después de mucho buscar encontré un pequeñísimo script que funciona a la perfección. Aquí te dejo el enlace por si te interesa http://webdesignandsuch.com/add-zebra-striping-to-a-table-with-jquery/
    Saludos!

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR