Ocultar celda

[jeleguia]

Como puedo hacer para ocultar una celda dentro de un tabla. Y claro luego de ocultarse, que las celdas que se encuentren debajo corran para q no se vea un vacio.

Gracias por su ayuda

[TurKa]

A ver.. tipo receta de cocina:
Ingredientes que necesitarás

1. Asignar un ID único a cada fila que desees mostrar u ocultar
2. Elegir la forma en la que deseas llamar a la función que oculte o muestre las filas: ya sea al elegir una opción de un formulario o apretar un botón o imagen

Vamos por partes dijo Jack el destripador

Necesitarás un script:

Código:

<SCRIPT languaje="JavaScript">
function ocultar(id_fila) {
document.all[id_fila].style.display = "none";
}
</script>

¿Qué hace este script:
Simplemente oculta la fila con el id que le indiques.
Ahora al crear la tabla le asignarás:
- Un id a cada fila
- Y yo opté por colocar un botón en la misma fila que la oculte.

Código:

<TABLE width=100%>
   <TR width=100% id="fila_a" style="display: block">
        <TD width=50%>Tus datos</TD>
        <TD width=50%><INPUT type=button value="X" onClick="ocultar('fila_a')"</TD>
   </TR>
   <TR width=100% id="fila_b" style="display: block">
        <TD width=50%>Tus datos 2</TD>
        <TD width=50%><INPUT type=button value="X" onClick="ocultar('fila_b')"</TD>
   </TR>
</TABLE>

Ahora ¿Qué pasa si quieres volverla a mostrar?

deberás utilizar otra función, por ejemplo, "mostrar":

Código:

<SCRIPT languaje="JavaScript">
function mostrar(id_fila) {
document.all[id_fila].style.display = "block";
}
</script>

Lo ideal en este caso, sería colocar un botón fuera de la fila que ocultarás (obviamente una vez que la ocultes el botón no se mostrará).

Espero que te sirva.
Un Saludo!!!

[nando87dc]

quiero hacer unas modificaciones sobre lo que posteo TURKA
buscaba una forma de hacer un menú con una celda que fuera el Titulo

MENU
item 1
item 2
item 3
item 4
item ...

y que al cliquear sobre MENU se abriera y cerrara la lista.

con el código que publico TURKA no sé porqué motivo cuando llamas repetidas veces a la función 'mostrar' y 'ocultar' van quedando celdas vacias y la lista se va llendo hacia abajo.

la manera que encontre de solucionarlo es usando el estilo 'visibility' en vez de 'display '

en este caso se usa para ocultar
document.all['id_celda'].style.visibility = "visible";
y para mostrar
document.all['id_celda'].style.visibility = "collapse";

y en la celda o tabla
<td id="on" style="visibility:visible">
<td id="on" style="visibility:collapse">

yo lo hice poniendole al texto de MENU un link que llamara a la función
para mostrar
<a href="javascript:mostrar()">MOSTRAR</a>
para ocultar
<a href="javascript:ocultar()">OCULTAR</a>

¿cómo hago que pikando una vez se muestre y al hacerlo de nuevo se oculte?
simplemente copio dos veces la celda de MENU
en una con el link para llamar a mostrar() y en la otra con ocultar()

en la celda MENU de ocultar() le pongo 'collapse' para que no se vea de entrada
al llamar a la función mostrar desde la celda MENU visible, oculta esta y muestra la que llama a ocultar().

bueno creo que hice un lio.
si no se entiende me tomo más tiempo y lo explico mejor, estoy medio apurado de tiempo pero no queria dejar pasar la oportunidad de postear.


abrazos


Fernando del Castillo