Mis apuntes
Leonardo D. A. Allende Pasten

Ocultar y mostrar tablas con javaScript

Wie get’s?

La siguiente funcion sirve para ocultar y mostrar tablas.

1.- Copiar codigo y pegarlo en la parte de codigo de un documento .html

<script>
function mostrarOcultarTablas(id){
mostrado=0;
elem = document.getElementById(id);
if(elem.style.display==’block’)mostrado=1;
elem.style.display=’none’;
if(mostrado!=1)elem.style.display=’block’;
}
</script>

2.- Crear dos tablas distintas para este ejemplo, pero con un pequeño detalle, colocarlas entre etiquetas <div></div> cada una de las tablas. con los siguientes parametros:

id=”tabla1″ style=”display: none”

id es el identificador, display es la muestra que pueden ser none, block. Para el ejemplo coloquen en none

Si no comprenden, copien el codigo de abajo y donde dice aqui entra la tabla, creen una tabla

<div id=”tabla1″ style=”display: none”>
aqui entra la tabla…………….. 1
</div>

<div id=”tabla2″ style=”display: none”>
aqui entra la tabla…………….. 2
</div>

3.- Crear dos links para cada tabla claro

<a href=”javascript:mostrarOcultarTablas(‘tabla1’)”>Mostrar tabla 1</a>

<a href=”javascript:mostrarOcultarTablas(‘tabla2’)”>Mostrar tabla 2</a>

Ahora guardar y ejecutenlo en el navegador Firefox o Explorer.

Bueno hasta luego.

Anuncios

29 comentarios to “Ocultar y mostrar tablas con javaScript”

  1. Es un ejemplo sencillo, pero muy práctico. Esto era justo lo que buscaba. Muchísimas gracias.

  2. Muy Bueno. Gracias

  3. Excelente!!!! Gracias

  4. De veras que este ejemplo funciona perfecto, Una sola función y aplica para cualquier cantidad de elementos HTML.

  5. Muy buen ejemplo, facil de entender y sencilla su implementación

  6. Pequeño pero poderoso buena amigo… porrque no haces una mas avanzada… como una galeria de tablas… con con los enlaces que digan : Back table | Next table
    sera de gran ayuda…………..

  7. ami no me funiciono, me dice se esperaba un objeto

  8. Muchas gracias! Al copiar y pegar el codigo no me funcionaba x ciertos caracteres como las comas simples y las dobles, tuve q arreglar un poquito, me quedo asi y funciona perfecto en Firefox y IE6:

    function mostrarOcultarTablas(id){
    mostrado=0;
    elem = document.getElementById(id);
    if(elem.style.display==’block’)mostrado=1;
    elem.style.display=’none’;
    if(mostrado!=1)elem.style.display=’block’;
    }

    Se muestra la tabla 1

    Se muestra la tabla 2

    Mostrar tabla 1

    Mostrar tabla 2

  9. Tengo un problemilla de compatibilidades…… este script me funciona de lujo en firefox, pero en el IE me abre la página como descolocada. A ver si podéis iluminarme y decirme por qué…

    Muchas gracias de antemano.

  10. Bonito, práctico y funcional…
    Muchas gracias!!!

  11. Gracias por el ejemplo. Gente como tú es lo que hace grande a Internet.

  12. gracias por el aporte!!
    de maravilla!!

  13. Amigo mira me gustaria saber como hacer la misma implementacion pero que al darle clik en mostrar tabla 1 me aparezca la tabla 1 y cuando le de clik en mostrar tabla 2 solo me aparezca la tabla 2 y ya no me muestre la tabla 1… no se si me dejo entender…si encuentras la respuesta porfavor responde a mi email davidjam7@hotmail.com
    Gracias¡¡¡¡

  14. Ey compadre que gran aporte!!!
    se le agradece mucho!!!

  15. increíble el ejemplo justo lo que buscaba y necesitaba yo lo voy a implementar con onclick y así lo podemos usar en cualquier objeto simplemente genial !! sigue asi

  16. ta chido

  17. gracias me salvasteeee

  18. Excelente, me fue de gran ayuda, gracias.

  19. Hola y sabes como hacer para que cuando en if sea correcto el dato me oculte esa tabla?, no he logrado mandar a traer ese enlace automaticamente, espero alguien pueda ayudarme

  20. Gracias, me ha servido de mucho la funcion!!

  21. bunas tardes me podran ayudar en la creacion de una tabla de de 8 columnas con 5 filas.. les explico la primero columna contiene infromacion cada clip que yo pueda hacer en esa columna tiene que aparecerme en la segunda fila, luego de hacer clip en cualquier descripcion que aparesca ahi, tiene que aparecer otra informacion en la tercera fila, y esa tercera fila tambien tiene informacion y al hacer clip en cualquier campo aparecera la informacion en la cuarta fila asi sucesivamente,,, me explique bien…….????

  22. muy bueno… tu ayuda… gracias… la verdad que no tenia ni idea de como utlizar la funcion display.. ppero gracias me fue de mucha ayuada…

  23. Como le hago para que no tenga la necesidad de volver a darle click al boton para que desaparesca el texto o la tabala, ya que tengo 5 bloques de información

  24. muy buen aporte bro seguimos adelante

  25. vi la funcion, la seguí paso a paso, lo unico diferente que yo no la implemento en un evento sino que en un inputo, lo que hice fue llamar a al funcion “onclick” en dicho input pero no me funciono, me podrias ayduar


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: