Mostrar o esconder opciones...

sir_bowen · #1 (**permalink**) 14/03/2006, 08:53

Hola buenas,

necesito saber como mostrar o esconder filas de una tabla, que contiene elementos de un menú.
El tema está que al hacer clic sobre un apartado que contiene subapartados, se desplieguen estos subapartados...

Quiero decir:
si tengo

Apartado1
Apartado2
Apartado3
|______Subapartado31
|______Subapartado32
Apartado4
Apartado5
|______Subapartado51
|______Subapartado52
|______Subapartado53

Quiero que inicialmente solo se vean los apartados 1,2,3,4 y 5. Pero que al hacer clic en el Apartado3 o el Apartado5, se muestren las opciones correspondientes. Me gustaría hacerlo sin tener que cargar una nueva página...

¿Alguien puede echarme un cable?

Muchas gracias

Un saludo

flaviovich · #2 (**permalink**) 14/03/2006, 16:19

Seria mas o menos asi:

Código:

function ocultarFila(idTabla, fila, ocultar)
{
	tr = document.getElementById(idTabla).getElementsByTagName('tr')[fila];
	tr.style.display = ocultar ? '' : 'none';
}

Código HTML:

<table id="myTable">
<tr>
  <td colspan="4">
    <select size="1" onChange="ocultarFila('myTable',1, (this.value == 1) ? true : false);">
	  <option value="0"></option>
	  <option value="1">Ver</option>
	  <option value="2">Ocultar</option>
	</select>
  </td>
</tr>  
<tr style="display:none">
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
</table>

sir_bowen · #3 (**permalink**) 15/03/2006, 02:49

No es exactamente eso lo que quiero hacer...
te lo agradezco, pero no es con un select como quiero que se muestren o escondan las filas de la tabla

Me gustaría que se mostraran haciendo clic sobre el apartado que contiene los subapartados (esto es sobre el enlace que quiero poner en Apartado3 y en Apartado5), y que se ocultaran de nuevo al hacer clic sobre el mismo enlace....

No sé si me explico...

Muchas gracias

Un saludo

flaviovich · #4 (**permalink**) 15/03/2006, 08:58

Código HTML:

<html>
<head>
<title></title>
<style type="text/css">
.apartado{ cursor: pointer; }
</style>
<script language="javascript">
function ocultarFila(idTabla, fila)
{
	tr = document.getElementById(idTabla).getElementsByTagName('tr')[fila];
	tr.style.display = tr.style.display == '' ? 'none' : '';
}
</script>
</head>
<body>
<form>
	<table id="myTable" border="1 ">
		<tr>
		  <td>Apartado1</td>
		  <td>&nbsp;</td>
		</tr>  
		<tr>
		  <td>Apartado2</td>
		  <td>&nbsp;</td>
		</tr>  
		<tr>
		  <td class="apartado" onClick="ocultarFila('myTable', 3); ocultarFila('myTable', 4);">Apartado3</td>
		  <td>&nbsp;</td>
		</tr>  
		<tr style="display:none">
		  <td>&nbsp;</td>
		  <td>Subapartado31</td>
		</tr>
		<tr style="display:none">
		  <td>&nbsp;</td>
		  <td>Subapartado32</td>
		</tr>
		<tr>
		  <td>Apartado4</td>
		  <td>&nbsp;</td>
		</tr>  
		  <td class="apartado" onClick="ocultarFila('myTable', 7); ocultarFila('myTable', 8); ocultarFila('myTable', 9);">Apartado5</td>
		  <td>&nbsp;</td>
		</tr>  
		<tr style="display:none">
		  <td>&nbsp;</td>
		  <td>Subapartado51</td>
		</tr>
		<tr style="display:none">
		  <td>&nbsp;</td>
		  <td>Subapartado52</td>
		</tr>
		<tr style="display:none">
		  <td>&nbsp;</td>
		  <td>Subapartado53</td>
		</tr>
	</table>
</form>
</body>
</html>

Y aquí una muestra.

sir_bowen · #5 (**permalink**) 15/03/2006, 09:23

Que crack!!!
Eso justamente

Muchas gracias!!!

Un saludo enoooooooorme