Tablas de filas expandibles y colapsable en HTML

Hola :D

Creo que otro usuario hizo una pregunta parecida a mi duda, pero al final no se daba respuesta ninguna porque no daba detalles de lo que quería. Yo intentaré explicar bien mi duda.

Lo que yo quiero es hacer una tabla normalita, en la que todas las n-filas, clickeando una vez sobre ellas, den lugar a algunas otras pocas nuevas filas de datos bajo ella. El código de abajo en HTML hace casi lo que yo quiero, con el problema de que solo la primera fila es clickeable y da lugar a nuevas filas de datos ocultas. Yo querría que también la segunda, y luego otra tercera, ...., y "n- filas" más, pudieran ser clickeables y pudieran expandirse y contraerse, y así mostrar u ocultar nuevas filas bajo ellas. La duda es la función, porque con este ejemplo, es fácil ya que solo hay dos filas, ('thead' y 'tfoot') y la función funciona solo pulsando la fila que está etiquetada como <thead>, es decir, la primera. Como yo quiero que la 2ª fila también se expandiera y colapsara, mi intuición me decía que cambiando su etiqueta de <tfoot> a <thead>, haría lo mismo que la de arriba, pero entonces, la fila adquiere caracter de cabecera y se sube arriba con la primera. Y no sé ya qué hacer :(. Qué debería hacer para diseñar una tabla con n-filas, en las que todas actuaran como <thead> o cabecera de la tabla, y pudieran colapsarse o expandirse individualmente?. ¿O es mejor utilizar otro método que el de "thead" y "tfoot" si se quiere hacer esto?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tablas expandibles</title>
<style type="text/css">
table.headcollapse{
 width:30em;
}
table.headcollapse caption{
 font-size:120%;
 text-transform:uppercase;
 text-align:left;
 padding:.5em 1em;
}
table.headcollapse th{
 text-align:left;
}
table.headcollapse,table.headcollapse th,table.headcollapse th
{
 border:none;
 border-collapse:collapse; 
}
table.headcollapse thead th
{
 width:10em;
 border-style:solid;
 border-width:1px;
 border-color:#cff #69c #69c #cff;
 background:#99CC00;
 padding:2px 10px;
}
table.headcollapse tfoot th,
table.headcollapse tfoot td
{
 border-style:solid;
 border-width:1px;
 border-color:#9cf #369 #369 #9cf;
 background:#99CC00;
 padding:2px 10px;
}
table.headcollapse tbody{
 background:#ddd;
}
table.headcollapse tbody td{
 padding:5px 10px;
 border:1px solid #999;
}
table.headcollapse tbody th{
 padding:2px 10px;
 border:1px solid #999;
 border-left:none;
}
table.headcollapse tbody tr.odd{
 background: #BFDFFF;
}
table.headcollapse tfoot td img{
 border:none;
 vertical-align:bottom;
 padding-left:10px;
 float:right;
}
</style>
<script language="javascript">
function tablecollapse()
{
 /* Variables */
 var collapseClass='headcollapse';
 var collapsePic=''; //Nombre de la imagen de la flecha hacia arriba
 var expandPic=''; //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.className)){continue;} 
 // Crea un cabeza de página clickable
 t.getElementsByTagName('thead')[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.style.display=tb.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.getElementsByTagName('tbody');
 for(var j=0;j<tb.length;j++)
 {
 tb[j].style.display='none';
 } 
 }
 // Agrega un link a la imagen 
 // Accede 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.getElementsByTagName('thead')[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>
</head>
<body>
<table summary="Comparaci&oacute;n de servicios de blog gratuito " class="headcollapse">
 <caption>&nbsp;
 </caption>
 <thead>
 <tr>
 <th bgcolor="#FF0000">Blogs gratis </th>
 <th bgcolor="#FF0000">Publicidad</th>
 <th bgcolor="#CCCCCC">Personalizable</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <th>Mejor opci&oacute;n </th>
 <td colspan="2">Blogger</td>
 </tr>
 </tfoot>
 <tbody style="display: none;">
 <tr>
 <th bgcolor="#FFFFFF">Wordpress</th>
 <td bgcolor="#FFFFFF">No</td>
 <td bgcolor="#FFFFFF">No</td>
 </tr>
 <tr bgcolor="#FFFFFF" class="odd">
 <th bgcolor="#FFFFFF">MovableType</th>
 <td bgcolor="#FFFFFF">Si</td>
 <td bgcolor="#FFFFFF">Si</td>
 </tr>
 <tr>
 <th bgcolor="#FFFFFF">Blogger</th>
 <td bgcolor="#FFFFFF">No</td>
 <td bgcolor="#FFFFFF">Si</td>
 </tr>
 <tr>
 <th bgcolor="#FFFFFF">dfhd</th>
 <td bgcolor="#FFFFFF">dfhgf</td>
 <td bgcolor="#FFFFFF">dfhfgh</td>
 </tr>
 <tr>
 <th bgcolor="#FFFFFF">dfhdf</th>
 <td bgcolor="#FFFFFF">dfgdfg</td>
 <td bgcolor="#FFFFFF">jfgjh</td>
 </tr>
...

Añade tu respuesta

Haz clic para o