Programación en castellano
Inicio > Foros > Javascript > ocultar mostrar tablas
-Foros de debate

Javascript
Lista de foros | Lista de mensajes de este foro

Privacidad: Recuerde que la información escrita en los foros de programación es 100% pública y que su ip será registrada asociada a su mensaje. Si encuentra un mensaje fuera de lugar, por favor, notifiquelo para su revisión y eliminación.

ocultar mostrar tablas
Enviado por maac78 el día 15 de noviembre de 2005

Hola, tengo una problema con javascript estoy en ello desde hace poco y necesitaria crear un sistema a traves de botones de opciones y que segun cual seleciones aparezca una tabla, hasta ahi bien, el problema que tengo es que si seleccionas otra te aparece pero no desaparece la que seleccionamos antes.

Adjunto el codigo que tengo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ejemplo</title>
<script>
function viewHide(id)
{
var targetId, srcElement, targetElement;
var targetElement = document.getElementById(id);
if (targetElement.style.display == "none") {
targetElement.style.display = "";
} else {
targetElement.style.display = "none";
}

}
</script>
</head>
<body>
<table width="90%" border="0" align="center">
<tr>
<td height="87" class="contenido"><table width="100%" border="0">
<tr>
<td width="100%" colspan="2" class="contenido">&nbsp;</td>
</tr>
<tr>
<td colspan="2" class="titulosecciones"></td>
</tr>
<tr>
<td colspan="2" class="txtformularios"><table border="1" align="center">
<tr>
<td><label>
<input name="regdom" type="radio" Onclick="viewHide('tabla1')" value="A" >
</label></td>
<td><div align="left">Seleecion A </div></td>
</tr>
<tr>
<td><input name="regdom" type="radio" Onclick="viewHide('tabla2')" value="B"></td>
<td>Selecci&oacute;n B </td>
</tr>
<tr>
<td><input name="regdom" type="radio" Onclick="viewHide('tabla3');" value="C"></td>
<td>Selecci&oacute;n C </td>
</tr>
<tr>
<td><input name="regdom" type="radio" Onclick="viewHide('tabla4');" value="D"></td>
<td>Seleccion D </td>
</tr>
</table>
<table id=tabla1 style="display:none" width="100%" border="1">
<tr>
<td>Contenido Seleccion A</td>
</tr>
</table>
<table id=tabla2 style="display:none" width="100%" border="1">
<tr>
<td>Contenido Seleccion b</td>
</tr>
</table>
<table id=tabla3 style="display:none" width="100%" border="1">
<tr>
<td>Contenido Seleccion c </td>
</tr>
</table>
<table id=tabla4 style="display:none" width="100%" border="1">
<tr>
<td>Contenido Seleccion D </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

 
Re: ocultar mostrar tablas
Enviado por ricardo el día 16 de noviembre de 2005

Bueno probe tu pagina.
Te envio una solucion, no muy elegante pero funciona.
cambia la funcion de la siguiente forma.
function viewHide(id)
{
var targetId, srcElement, targetElement;
var targetElement;

targetElement = document.getElementById('Tabla1');
targetElement.style.display = "none";
targetElement = document.getElementById('Tabla2');
targetElement.style.display = "none";
targetElement = document.getElementById('Tabla3');
targetElement.style.display = "none";
targetElement = document.getElementById('Tabla4');
targetElement.style.display = "none";

targetElement = document.getElementById(id);
if (targetElement.style.display == "none") {
targetElement.style.display = "";
} else {
targetElement.style.display = "none";
}

}

 
Re: Re: ocultar mostrar tablas
Enviado por Smeagol el día 20 de enero de 2006

Yo lo que quiero es que al hacer click se muestre una tabla, si hago click en otro se oculte la tabla, pero si está la tabla a la vista, pueda hacer click en un tercer lugar y mostrar otra tabla oculta ¿se entiende lo que quiero? Por favor, si alguien me puede ayudar

 
Re: Re: Re: ocultar mostrar tablas
Enviado por carola el día 31 de mayo de 2006

el ejemplo anterior lo dice
tabla oculta
document.getElementById(\'tabla_posicion\').style.display = \'none\';

tabla que aparezca
document.getElementById(\'tabla_posicion\').style.display = \' \';

 




Tienda
Patrocinados
 

Copyright © 1999-2007 Programación en castellano. Todos los derechos reservados.
Formulario de Contacto - Datos legales - Publicidad

Hospedaje web y servidores dedicados linux por Ferca Network

red internet: musica mp3 | logos y melodias | hospedaje web linux | registro de dominios | servidores dedicados
más internet: comprar | recursos gratis | posicionamiento en buscadores | tienda virtual | gifs animados