Ocultar y desocultar tabla con una funcion

chefnelone · #1 (**permalink**) 07/03/2006, 12:43

hola a todos
Pues es solo eso. Quisiera que una tabla sea oculta y luego hacerla visible con una funcion. Es posible??
saludos.

JavierB · #2 (**permalink**) 07/03/2006, 12:56

Hola chefnelone

Si, es posible. Ponle un id a la tabla y utiliza este código:

document.getElementById('tuid').style.display = 'none'; // ocultar
document.getElementById('tuid').style.display = 'block'; // mostrar

Saludos,

chefnelone · #3 (**permalink**) 08/03/2006, 05:14

Gracias JavierB ,he usado las lineas que me pasaste pero no me funciona , aquí está el codigo que uso.
Estas son las funciones
(me parece que el problema son esas comillas simples...)

function OcultarTablaHereEstimateOn(){
document.getElementById('HereEstimateTable').style .display ='block';
}

function OcultarTablaHereEstimateOff(){
document.getElementById('HereEstimateTable').style .display ='none';
}
Aquí está la tabla con el ID

<table id="HereEstimateTable" width="788" height="613" border="0" cellpadding="0" cellspacing="0">

Aquí llamo a las funciones
<input type="button" name="Submit2" value="Ocultar" onClick="OcultarTablaHereEstimateOn()" >
<input type="button" name="Submit6" value="Mostrar" onClick="OcultarTablaHereEstimateOff()">

muchas gracias

germanpr · #4 (**permalink**) 08/03/2006, 05:20

No se si será a causa de lo que te voy a decir o no, pero fijate que en la linea document.getElementById('HereEstimateTable').style .display ='block';, entre .style y .display existe un espacio en blanco.

Repito, no se si será ese el fallo, pero prueba a ver :P

pinchoso · #5 (**permalink**) 08/03/2006, 05:38

A mi no me da ningun error, me funciona perfectamente, lo unico que llamas las funciones con los botones cambiados, ocultar llama a mostrar, mostrar llama a ocultar.

Código:

<script>
function OcultarTablaHereEstimateOn(){ 
document.getElementById('HereEstimateTable').style.display ='block';
} 
function OcultarTablaHereEstimateOff(){ 
document.getElementById('HereEstimateTable').style.display ='none'; 
}
</script>

<body>
<table id="HereEstimateTable" width="788" height="613" border="0" cellpadding="0" cellspacing="0">
<tr><td>
Aquí llamo a las funciones
</td></tr></table>
<input type="button" name="Submit2" value="Ocultar" onClick="OcultarTablaHereEstimateOff()" >
<input type="button" name="Submit6" value="Mostrar" onClick="OcultarTablaHereEstimateOn()">
</body>

chefnelone · #6 (**permalink**) 08/03/2006, 08:44

muchas gracias me ha funcionado
saludos

augusto_jaramil · #7 (**permalink**) 11/03/2006, 10:05

Hola a todos....

Algo como esto habia estado buscando desde hace algun tiempo.... solo tengo una inquietud: el script muestra dos botones (Ocultar, Mostrar), como puedo hacer para utilizar solo uno para que al picar muestre el contenido de la tabla si esta oculta y viceverrsa? y ademas que al abrir la pagina aparesca oculta?

Mil gracias de antemano

Cordial Saludo

JavierB · #8 (**permalink**) 11/03/2006, 10:17

Hola augusto_jaramil

Para que aparezca oculta la tabla ponle el estilo display:none

Para tener un solo botón, utiliza una variable global:

Código:

var oculta = true;
function ocultar() {
  document.getElementById('HereEstimateTable').style.display = (oculta) ? 'block' : 'none';
  oculta = !oculta;

Espero que te sirva. Saludos,

augusto_jaramil · #9 (**permalink**) 11/03/2006, 10:48

Gracias JavierB....

Efectivamente al abrir la pagina hace visible la tabla y al picar sobre el boton se oculta....

pero como se hace para hacerla nuevamente visible picando sobre el mismo boton?

Perdoname la falta de ignorancia

Un Cordial Saludo

JavierB · #10 (**permalink**) 11/03/2006, 10:54

Hola de nuevo.

Te pongo un ejemplo completo, para que lo pruebes:

Código:

<html>
<head>
<script type="text/javascript">
var oculta = true;
function ocultar() {
  document.getElementById('HereEstimateTable').style.display = (oculta) ? 'block' : 'none';
  oculta = !oculta; }
</script>
</head>
<body>
<table id="HereEstimateTable" style="display:none">
<tr><td>Tabla</td></tr>
</table>
<input type="button" value="Mostrar/ocultar" onclick="ocultar()" />
</body>
</html>

Saludos,

augusto_jaramil · #11 (**permalink**) 11/03/2006, 11:01

Esa si era!!!! de nuevo.... Mil gracias... ahora si puedo dormir dandole gracias a mi Dios por haber aprendido una cosa nueva y no pasar el dia en vano

Un Cordial Saludo