problema al ocultar tabla

bertico · #1 (**permalink**) 23/02/2011, 14:27

hola todos.
este es mi problema.

tengo ciertas tablas declaradas en html.
como son varias las que tengo que mostrar en la misma pagina quiero darle al usuario de esconderlas o no de manera que si este pincha sombre la primera fila las demas se oculten o se muestren en dependencia de si estaba mostrada la tabla o no...
lo hago con este codigo

function ocultar(nombreCapa){//esto es para esconder y mostrar las tablas al hacer clip en su encabezado
if(nombreCapa.rows[1].style.display != "none"){
for(var i=1; i<=nombreCapa.rows.length; i++) {
nombreCapa.rows[i].style.display="none" ;
}
}
else {
for(var i=1; i<=nombreCapa.rows.length; i++) {
if(nombreCapa.id == "ID_tabla_interior"){
MostrarTablaInterior(nombreCapa );
exit;}
nombreCapa.rows[i].style.display="inherit" ;
}
}
}

me funciona bien... pero el problema esta que al recoger la tabla solo se mostraria la primera fila de esta pero esta se mueve hacia el centro del espacio donde estaba mostrada la tabla completa. es decir, yo desearia que la primera fila se quedara en el mismo lugar y que las demas se ocultaran, pero lo que hace es que se mueve hacia el medio del espacio que ocupaba la tabla..

si pueden me dicen pk pasa esto y como puedo solucionarlo...

zerokilled · #2 (**permalink**) 23/02/2011, 14:43

buenas...

no entendi bien el comportamiento que describes al final de las filas moverse al centro del espacio. hubiera sido perfecto si mostraras un ejemplo mas completo. de todos modos, intenta cambiando el string "inherit" por un string vacio. adicionalmente, la palabra exit no existe en javascript por lo que el interprete lo entendera como una variable, quizas lo que queras hacer es un return.

omarMusic · #3 (**permalink**) 23/02/2011, 15:32

Que tal éste ejemplo:

Código HTML:

Ver original<html>
<head>
<script>
    function ocultar(id){
        var tabla = document.getElementById(id);
        for(var i=1; i<tabla.rows.length; i++) {
            tabla.rows[i].style.display=tabla.rows[i].style.display==""?"none":"";
        }
    }
</script>
<style type="text/css">
td,th {border: 1px solid red; }
table {border-collapse: collapse;}
</style>
</head>
<body >
    <table id="tabla1">
        <tr onclick="ocultar('tabla1')">
            <th>titulo 1 </th><th>titulo 2 </th><th>titulo 3</th>
        </tr>
        <tr>
            <td>1 </td><td>2 </td><td> 3</td>
        </tr>
        <tr>
            <td>4 </td><td>5 </td><td>6 </td>
        </tr>
        <tr>
            <td>7 </td><td> 8</td><td>9 </td>
        </tr>
    </table>
</body>
</html>

Saludos!

ocp001a · #4 (**permalink**) 23/02/2011, 15:47

Puede depender mucho del posicionaminento de la tabla, que al haber menos información se reacomode. habría que ver como estas "dibujando" esa tabla, y su posición respecto a los demás elementos.

bertico · #5 (**permalink**) 24/02/2011, 10:38

gracias por sus respuestas. el codigo que me ponen ahi es mas pequeño. lo cambiare .
lo demas lo hago igual....
en cuando a como declaro la tabla

este el codigo de una tabla. al final da lo mismo que tenga una sola tabla dentro de la pagina me hace exactamente lo mismo....

<form action="<?=site_url("c_equipo/Editar/".$equipo->id)?>" method="post" >
<table border="0" class="tabla" id="mostrar_datos_generales" >
<tr onClick="ocultar(mostrar_datos_generales)">
<td colspan="6" class="titulo" > Mostrar Datos Generales </td>
</tr>
<tr>
<td class="label">Tipo de equipo: </td>
<td class="label_datos" ><?=$equipo->tipo_equipo->nombre ?>
<input type="hidden" id="tipo_equipo" value="<?=$equipo->tipo_equipo->id_tipo_equipo?>" /></td>
<td class="label">Departamento:</td>
<td class="label_datos"><?=$equipo->departamento->nombre ?></td>
<td class="label">Descripción:</td>
<td class="label_datos"><?=$equipo->descripcion ?></td>
</tr>
<tr>
<td class="label">Fabricante</td>
<td class="label_datos"><?=$equipo->fabricante->nombre ?></td>
<td class="label">Marca:</td>
<td class="label_datos"><?=$equipo->marca->nombre ?></td>
<td class="label">Modelo:</td>
<td class="label_datos"><?=$equipo->modelo->nombre ?></td>
</tr>
<tr>
<td class="label"> Sello Garantia:</td>
<td class="label_datos"><?=$equipo->NoSello_garantia ?></td>
<td class="label"> Sello BI : </td>
<td class="label_datos"><?=$equipo->NoSelloBI ?></td>
<td class="label"> </td>
<td> </td>
</tr>
<tr>
<td class="label">Propietario:</td>
<td class="label_datos"><?=$equipo->propietario ?></td>
<td class="label">Proyecto:</td>
<td class="label_datos"><?=$equipo->proyecto ?></td>
<td class="label"> </td>
<td> </td>
</tr>
<tr>
<td colspan="6" ><label>
<input type="button" name="Adicionar Componentes" value="Adicionar Componentes" style="float:right"
onclick="MostrarTabla(Adicionar_componente )" />
<input type="submit" name="Editar" value="Editar" style="float:right"/>
</label></td>
</tr>
</table>
</form>

utilizo una platilla con 2 columnas , una para el menu y otra para la informacion. en la de la informacion es donde declaro esas tablas...quizas ahora que me dices eso el problema esta en que el area editable de la segunda columna de la plantilla esta en el centro. y por eso lo que se muestra tiene mostrarse en el centro simpre...

que mas puedo hacer??

ocp001a · #6 (**permalink**) 24/02/2011, 10:59

Pues me parece lo mismo, la tabla seguramente está centrada, sólo que al contener información ocupa todo el espacio disponible. Prueba poniéndole style="position:left;" para que te la coloque a la izquierda sin importar cuantas filas tenga.

Por otro lado, podrías declarar las filas a ocultar dentro de un <tdboy></tbody> y así ocultas el tbody de una sola vez en vez del bucle que recorre la tabla.

bertico · #7 (**permalink**) 25/02/2011, 17:54

ya esta ocp001a problema resuelto

utlice el float y me hace lo que que pido.ademas tuve que ponerle a las tablas un ancho determinado pk entonces verticalmente se quedaba estatico pero horizontalmente me pasaba algo parecido. no utilce <tdboy> debido a que posteriormente deseo que cada fila se oculte o muestre dado un tiempo determinado para darle la sensacion al usario de que se va escondiendo poco a poco....
gracias por la ayuda..