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

CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO

CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO

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

CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO

CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO
CONTENIDO	CONTENIDO	CONTENIDO

¿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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter