Desplegar parcialmente una tabla | Oloblogger Como siempre, seguro que hay otra manera de hacer esto, pero la que se presenta aquí es la única que se me ha ocurrido para contestar a JAIM...

1 de octubre de 2010

Desplegar parcialmente una tabla

Como siempre, seguro que hay otra manera de hacer esto, pero la que se presenta aquí es la única que se me ha ocurrido para contestar a JAIME. La cosa consiste en tener una tabla oculta parcialmente y poder desplegar esa parte pulsando un botón.

El problema reside en introducir un ID unívoco en parte de la tabla, para poder luego ocultar o desplegar esa parte mediante un script. Todo esto sin fastidiar el código que forma la tabla y que requiere de todos su TR, TD y sus cierres, en perfecto orden y sin interferencias de otros códigos.

La chapucilla que se me ha ocurrido en esta ocasión es construir dos tablas, presentarlas juntas como si fueran una y meter toda la que quedará inicialmente oculta en un DIV que sí podrá llevar una ID sin problemas.

Para empezar contruimos el script que hace que podamos ocultar cosas mediante una clase determinada. A través de su ID se podrá cambiar la clase para que se muestre/oculte. Como es habitual, todo esto irá antes de </head>

<style type="text/css">
.ver {display:block;}
.nover {display:none;}
</style>
<script type="text/JavaScript">
function vernover(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == 'ver'){
menu.className = 'nover';
} else {
menu.className = 'ver';
}
}
</script>


Actualización: Lo anterior sería el código para colocar en un POST, no en la plantilla. Para que este código lo admita Blogger en la susodicha, tendreis que cambiar las comillas dobles (") por simples (') y las simples por &quot;.

A continuación construimos nuestras tablas dónde se quieran poner, con el procedimiento habitual:

<table class="ejemplo"><tbody>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
</tbody></table>

<div id="tablainferior" class="nover">
<table class="ejemplo"><tbody>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
</tbody></table>
</div>

Redactando el código uno a continuación del otro, las dos tablas aparecerán como una sola. A la segunda le hemos añadido mediante un DIV, un ID que en el ejemplo es tablainferior y este mismo identificador será el que utilicemos en el botón, mediante una llamada al JavaScript que hemos visto en primer lugar (vernover):

<a href="javascript:vernover('tablainferior');">Plegar/Desplegar</a> parte inferior tabla


Plegar/Desplegar parte inferior tabla 1

CONTENIDOCONTENIDOCONTENIDO
CONTENIDOCONTENIDOCONTENIDO
CONTENIDOCONTENIDOCONTENIDO
CONTENIDOCONTENIDOCONTENIDO
CONTENIDOCONTENIDOCONTENIDO
CONTENIDOCONTENIDOCONTENIDO

Para formatear la tabla anterior, hemos utilizado el siguiente CSS:

table.ejemplo {
width:300px;
margin:0px auto;
text-align:center;
}
table.ejemplo tbody tr td {
margin:5px;
padding:5px;
border:1px solid #000000;
background:#cccccc;
}

También podríamos hacer lo mismo con alguna librería de efectos. Por ejemplo con scriptaculous:


Plegar/Desplegar parte inferior tabla 2

CONTENIDOCONTENIDOCONTENIDO
CONTENIDOCONTENIDOCONTENIDO

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

13 comentarios :

  1. muy bueno me funciono de diez!!

    ResponderEliminar
  2. Hola Oloman,

    Mira. En mi "nuevo" blog he instalado el sistema de sumarios para las entradas. Queda muy bien, pero sucede que esas entradas que mayoritariamente están compuestas por una imagen o un widget, rompen la dinámica de la página, pues al no tener cuerpo de texto queda mal.
    Así que me preguntaba si hay alguna manera de evitar esto, es decir, poner condiciones para que determinadas entradas salgan completas.

    Muchas gracias

    ResponderEliminar
  3. Gracias Oloman por publicar este post, era lo q buscaba, una pregunta, el script q usas aqui es un pokitin diferente a uno q usaste para esta entrada:

    http://oloblogger.blogspot.com/2008/02/en-cualquier-parte-de-la-pgina.html

    Asumo q el de este post mas actual reemplaza al del anterior para todo, no?

    Gracias

    ResponderEliminar
  4. Mercier, yo también he observado eso que comentas, pero es lo que hay con el truco que utilizamos. Lo tengo anotado en mi agenda. Tan pronto encuentre alguna solución, lo publico... si es que alguna vez la encuentro.

    No necesariamente Jaime. Sólo cambié el nombre de las funciones para el caso de que ya se tuvieran instaladas anteriormente. Puedes usar sin problemas el otro código, porque realmente es el mismo.

    ResponderEliminar
  5. ok, pero tengo un problema, cuando pego el script en mi plantilla y le do guardar, las comillas simples se cambian por &-#-3-9 y las comillas simples del llamado por &-a-p-o-s (lo pongo con guiones para q el sistema no me lo cambie y lo puedas observar), y no me funciona, como puedo hacer??

    Otra cosa, creo q olvidaste sacar una etiqueta de cierre DIV al final del llamado, gracias Oloman.

    ResponderEliminar
  6. Sorry Oloman, Maria Elena es una cuenta con la q estaba logeado, pero soy yo... =)

    Gracias otra vez

    ResponderEliminar
  7. Ya me salio!!!!!!, pero con Scriptaculous, visite el link q pones al final del post, pero tambien tuve el mismo problema, pero leyendo el comentario 4, vi q la sintaxis del llamado era distinta, y talvez muchos como yo tengan el mismo problema. A mi sirvio el codigo no como esta el post sino como lo vi en el comentario 4, esto puede ser un aporte para otros, gracias Oloman.

    ResponderEliminar
  8. Ok, no te preocupes ;)

    Gracias de todas formas

    ResponderEliminar
  9. Que bueno como lo han explicado es muy detallado y creo que lo podré hacer, necesito una tabal no muy pequeña, pero si yo puedo darle la cantidad de filas y columnas está bien.

    ResponderEliminar
  10. Jaime, tienes razón. Ya lo he aclarado bajo el código. El que se muestra es para colocarlo en un post. Para que funcione en la plantilla hay que realizar las sustituciones que se indican en la actualización que se puede ver en el comentario que dices (#4) Y también sobraba un DIV ¡Me he lucido en este post! :D Gracias.

    Oposiciones medicos, le puedes dar el tamaño que quieras.

    ResponderEliminar
  11. Gracias a ti Oloman, y si por casualidad omites algo, eso esta "perdonado" por tan solo la gentileza de tener este Blog de ayuda y de respondernos tan amablemente...un amigo desde Perú =)

    ResponderEliminar
  12. No sé donde hacer una consulta, por eso ví esto y lo hago acá... que tengo que hacer cuando me sale un cartel que dice que un script no puede continuar o algo así, no tengo idea de lo que significa.

    ResponderEliminar
  13. Hola. Eso es cuestión de tu navegador. Muchas páginas incluyen javascript para mostrar su contenido. Tú puedes seleccionar en él si deseas que se ejecute el código escrito en ese lenguaje o no. Los scripts pueden introducir código malicioso y por eso, puedes configurar las directivas de seguridad del navegador para que no se ejecuten. En páginas de tu confianza no tendrás problemas.

    ResponderEliminar