mostrar ocultar tablas mediante boton de opcion

maac78 · #1 (**permalink**) 15/11/2005, 09:58

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>

JavierB · #2 (**permalink**) 15/11/2005, 10:13

Hola maac78. Bienvenido al foro.

He modificado un poco tu código, a ver si te sirve:

Código:

<script>
var obj=null;
function viewHide(id)
{
var targetId, srcElement, targetElement;
var targetElement = document.getElementById(id);
if (obj!=null) 
  obj.style.display='none';
obj=targetElement;
targetElement.style.display = "";
}
</script>

Saludos,

maac78 · #3 (**permalink**) 15/11/2005, 10:33

Hola JavierB,

Muchisimas gracias, funciona.

noraazzul · #4 (**permalink**) 04/10/2007, 10:26

Hola Chicos a mi igual me funciona perfecto, pero mi duda es si necesito tener seleccionado uno por default, por ejemplo si quiero tener en checked la opcion 2 tambien debo tener visible la tabla 2, bueno lo que trate de hacer fue cambiar el estilo de la tabla 2 a visible pero no me funciona ya que siempre qda visible aun si selecciono otra la verdad no tengo idea como hacer que me funcione, me podrian dar un empujoncito porfa??

noraazzul · #5 (**permalink**) 05/10/2007, 10:22

¿Alguien que me pudiera ayudar?? porfa...

derkenuke · #6 (**permalink**) 05/10/2007, 19:05

Hola

Supongo que cargando al inicio su función que la hace visible, y además marcando el checkbox correspondiente para que quede creible:

Código PHP:

  window.onload = function() {
  viewHide("tabla2");
  checkbox2.checked = true;
}

¿Te convence?

noraazzul · #7 (**permalink**) 06/10/2007, 11:41

Cita:

Iniciado por derkenuke

Hola

Supongo que cargando al inicio su función que la hace visible, y además marcando el checkbox correspondiente para que quede creible:

Código PHP:

  window.onload = function() {

  viewHide("tabla2");

  checkbox2.checked = true;

}

¿Te convence?

Hola derkenuke siii esta bien el problema es que regresa de nuevo a esa pagina y ya no es la tabla2 osea el valor que se envia a la funcion viewHide varia, no siempre es ese valor, ese valor lo tengo en una variable session no se si habra manera de enviar ese valor al script o sera mucho pedir....

derkenuke · #8 (**permalink**) 06/10/2007, 20:16

Hola de nuevo noraazzul.

Si tienes la variable en una session de PHP lo único que tienes que hacer es imprimirla en el documento dentro de una variable de texto javascript. A ver si sé hacértelo de memoria:

Código PHP:

 
var tablaAmostrar = "<?=$miVariable?>";

window.onload = function() {

  viewHide(tablaAmostrar);

  losCheckboxes[checkboxAmostrar].checked = true;

}

Otra cosa sería hallar el array losCheckboxes, y el índice checkboxAmostrar, que es muy fácil si la variable es "tabla2", pero habría que mirar qué nombres les das a las cosas, etcétera.

Un saludo.

mauricio1cc · #9 (**permalink**) 16/11/2007, 16:26

Hola a todos este es mi primer mensaje y no se como saldra, pero el asunto es el siguiente, copie este script tal cuál y me funciona perfecto en firefox, pero lo pruebo en IE y no oculta las tablas que no estan seleccionadas,¿Que pasara?

Cita:

Iniciado por JavierB

Hola maac78. Bienvenido al foro.

He modificado un poco tu código, a ver si te sirve:

Código:

<script>
var obj=null;
function viewHide(id)
{
var targetId, srcElement, targetElement;
var targetElement = document.getElementById(id);
if (obj!=null) 
  obj.style.display='none';
obj=targetElement;
targetElement.style.display = "";
}
</script>

Saludos,