ocultar mostrar tablas
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"> </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ón B </td>
</tr>
<tr>
<td><input name="regdom" type="radio" Onclick="viewHide('tabla3');" value="C"></td>
<td>Selecció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>
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"> </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ón B </td>
</tr>
<tr>
<td><input name="regdom" type="radio" Onclick="viewHide('tabla3');" value="C"></td>
<td>Selecció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>
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";
}
}
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";
}
}
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