Blog and Web

Tablas expandibles con CSS

Esta es una método con el cual al dar click en una flecha se muestra el contenido de una tabla mediante CSS y Javascript y te permite volverla a comprimir. Es bastante util cuando tenemos mucho contenido y deseamos que sea el usuario que ver.

  1. El script para la expansión de la tabla es el siguiente:
    <script language="javascript">
    function tablecollapse()
    {
    /* Variables */
    var collapseClass='footcollapse';
    var collapsePic='http://bp3.blogger.com/_Zuzii37VUO4/RfDr-iAns1I/AAAAAAAAAXQ/K6QjlxnM9ts/s1600/arrow_up.gif'; //Nombre de la imagen de la flecha hacia arriba
    var expandPic='http://bp1.blogger.com/_Zuzii37VUO4/RfDsECAns2I/AAAAAAAAAXY/yCUO7_DpwIo/s1600/arrow_down.gif'; //Nombre de la imagen de la flecha hacia abajo
    var initialCollapse=true;
    // Verfica la clase que tiene la tabla
    var t=document.getElementsByTagName('table');
    var checktest= new RegExp("(^|\s)" + collapseClass + "(\s|$)");
    for (var i=0;i<t.length;i++)
    {
    // Sí la tabla no tiene la propiedad adecuada la salta.
    if(!checktest.test(t[i].className)){continue;}
    // Crea un pie de página clickable
    t[i].getElementsByTagName('tfoot')[0].onclick=function()
    {
    // Verifica todo el cuerpo de la tabla y la muestra u oculta
    var tb=this.parentNode.getElementsByTagName('tbody');
    for(var i=0;i<tb.length;i++)
    {
    tb[i].style.display=tb[i].style.display=='none'?'':'none';
    }
    // Cambia la imagen de acuerdo a si esta expandida o contraida
    var li=this.getElementsByTagName('img')[0];
    li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic;
    }
    // Sí el cuerpo puede ser contraido lo hace
    if(initialCollapse)
    {
    var tb=t[i].getElementsByTagName('tbody');
    for(var j=0;j<tb.length;j++)
    {
    tb[j].style.display='none';
    }
    }
    // Agrega un link a la imagen
    // Acesa a la última celda en el pie de tabla
    var newa=document.createElement('a');
    newa.href='#';
    newa.onclick=function(){return false;}
    var newimg=document.createElement('img');
    newimg.src=initialCollapse?expandPic:collapsePic;
    var tf=t[i].getElementsByTagName('tfoot')[0];
    var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];
    newa.appendChild(newimg);
    lt.insertBefore(newa,lt.firstChild);
    }
    }
    // Corre el script al cargar la página.
    window.onload=tablecollapse;
    </script>
  2. Ahora definimos los estilos a los que podemos personalizar con nuestro propio diseño pero es importante mantener los mismo nombres de las clases (a menos que también las cambies en el script).
    <style type="text/css">
    table.footcollapse{
     width:30em;
     }
     table.footcollapse caption{
     font-size:120%;
     text-transform:uppercase;
     text-align:left;
     padding:.5em 1em;
     }
     table.footcollapse th{
     text-align:left;
     }
     table.footcollapse,table.footcollapse th,table.footcollapse th
     {
     border:none;
     border-collapse:collapse;
     }
     table.footcollapse thead th
     {
     width:10em;
     border-style:solid;
     border-width:1px;
     border-color:#cff #69c #69c #cff;
     background:#99CC00;
     padding:2px 10px;
     }
     table.footcollapse tfoot th,
     table.footcollapse tfoot td
     {
     border-style:solid;
     border-width:1px;
     border-color:#9cf #369 #369 #9cf;
     background:#99CC00;
     padding:2px 10px;
     }
     table.footcollapse tbody{
     background:#ddd;
     }
     table.footcollapse tbody td{
     padding:5px 10px;
     border:1px solid #999;
     }
     table.footcollapse tbody th{
     padding:2px 10px;
     border:1px solid #999;
     border-left:none;
     }
     table.footcollapse tbody tr.odd{
     background: #BFDFFF;
     }
    table.footcollapse tfoot td img{
     border:none;
     vertical-align:bottom;
     padding-left:10px;
     float:right;
     }
    </style>
  3. Para aplicarlo a nuestro web tenemos que hacer una tabla con la estructura del sigiente ejemplo:
    <table summary="Comparación de servicios de blog gratuito " class="footcollapse">
      <caption>
      comparación de Servicios de blog gratuito
      </caption>
     <thead>
      <tr>
      <th>Blogs gratis </th>
      <th>Publicidad</th>
      <th>Personalizable</th>
      </tr>
      </thead>
     <tfoot>
      <tr>
      <th>Mejor opción </th>
      <td colspan="2">Blogger</td>
      </tr>
      </tfoot>
      <tbody style="display: none;">
      <tr>
     <th>Wordpress</th>
      <td>No</td>
      <td>No</td>
      </tr>
      <tr class="odd">
      <th>MovableType</th>
      <td>Si</td>
     <td>Si</td>
      </tr>
      <tr>
      <th>Blogger</th>
      <td>No</td>
      <td>Si</td>
      </tr>
      </tbody>
      </table>
    

Como muchas cosas, puede ser complicado de implementar la primera vez pero después es más fácil y útil. Les dejo el ejemplo y ojala que les sirva:

DESCARGAR EJEMPLO

FUENTE: Christian Heilmann