Como mostrar/ocultar filas de una tabla, según List/Menu

flaviovich · #1 (**permalink**) 29/08/2005, 12:10

Hola!
Tengo un combobox:

Código HTML:

<select name="combo1" size="1">
           <option value="1" selected>Opcion 1</option>
           <option value="2">Opcion 2</option>
</select>

dentro de una tabla.
Necesito mostrar unas unos objetos (checkbox, text, label, etc.) según lo elegido.
Por ejemplo, al seleccionar Opcion 2, se muestra 1 fila de la tabla.
Me dijeron que se deben usar capas. Estuve leyendo sobre esto, pero me parecio algo complicado. Si alguien tiene algun ejemplo parecido, o conoce algun site con ejemplos de algo parecido a lo que necesito, le estare muy agradecido.

nuevo · #2 (**permalink**) 29/08/2005, 12:21

mira a ver si te sirve

Código PHP:

  <html>

<head>

<title>Mostrar/ocultar filas y columnas</title>

<style type="text/css">

table {border-collapse:collapse;border:1px solid maroon;margin-left:80px}

td {border:1px solid maroon;width:30px;text-align:center}

input {background:silver; border:1px solid maroon;width:100px;margin:5px}

</style>

<script type="text/javascript">

<!--

function ocultarFila(num,ver) {

dis=ver?'':'none';

tab=document.getElementById('tabla');

tab.getElementsByTagName('tr')[num].style.display=dis;

}

function ocultarColumna(num,ver) {

dis= ver?'':'none';

fila=document.getElementById('tabla').getElementsByTagName('tr');

for(i=0;i<fila.length;i++)

fila[i].getElementsByTagName('td')[num].style.display=dis;

}

-->

</script>

</head>

<body>

 
<table id="tabla" border="1"><tr><td></td></tr></table>

 
<input type="button" value="Quitar fila" onclick="ocultarFila(1,false)">

<input type="button" value="Poner fila" onclick="ocultarFila(1,true)">

<br>

<input type="button" value="Quitar columna" onclick="ocultarColumna(1,false)">

<input type="button" value="Poner columna" onclick="ocultarColumna(1,true)">

</body>

</html>

flaviovich · #3 (**permalink**) 29/08/2005, 15:30

Muchas gracias "nuevo"!
Era justo lo que necesitaba

Solo que habia un error, pero ya lo corregi.
Aquí esta el codigo corregido

Código:

<html>
<head>
<title>Mostrar/ocultar filas y columnas</title>
<style type="text/css">
table {border-collapse:collapse;border:1px solid maroon;margin-left:80px}
td {border:1px solid maroon;width:30px;text-align:center}
input {background:silver; border:1px solid maroon;width:100px;margin:5px}
</style>
<script type="text/javascript">
<!--
function ocultarFila(num,ver) {
dis=ver?'':'none';
tr=document.getElementById('tabla').getElementsByTagName('tr')[num];
tr.style.display=dis;
}
function ocultarColumna(num,ver) {
dis= ver?'':'none';
fila=document.getElementById('tabla').getElementsByTagName('tr');
for(i=0;i<fila.length;i++)
fila[i].getElementsByTagName('td')[num].style.display=dis;
}
-->
</script>
</head>
<body>

<table id="tabla" border="1">
	<tr>
		<td>hola</td><td>mundo</td><td>bello</td>
	</tr>
	<tr>
		<td>adios</td><td>mundo</td><td>cruel</td>
	</tr>
	<tr>
		<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
	</tr>
</table>

<input type="button" value="Quitar fila" onclick="ocultarFila(2,false)">
<input type="button" value="Poner fila" onclick="ocultarFila(2,true)">
<br>
<input type="button" value="Quitar columna" onclick="ocultarColumna(1,false)">
<input type="button" value="Poner columna" onclick="ocultarColumna(1,true)">
</body>
</html>

Ojala que a alguien le sirva tambien!