ocultar mostrar tablas

maac78
31 de Mayo del 2006
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>

ricardo
31 de Mayo del 2006
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";
}

}


Smeagol
31 de Mayo del 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

carola
31 de Mayo del 2006
el ejemplo anterior lo dice
tabla oculta
document.getElementById(\'tabla_posicion\').style.display = \'none\';

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