Menu que permita ver una tabla!

Il Dody · #1 (**permalink**) 21/04/2005, 12:33

hola a todos!
tengo un menu con 5 opciones. 3 de ellas deben dejar ver una tabla que en un principio debe estar oculta (osea, a menos q se seleccione la opcion indicada la tabla no debe mostrarse).

Les dejo mi codigo para q ven concretamente a q me refiero. la tabla con borde gris es la q yo quiero ocultar o sacar directamente y hacerla aparecer cuando selecciono del menu las palabras CAMION, MAQUINARIA u OTROS.

MUCHISMAS GRACIAS!!!

----------------------------------

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<TITLE>Cotizaciones</TITLE>
<script language="JavaScript" type="text/JavaScript">

</script>
</HEAD>
<BODY bgcolor="#FFFFFF">
<table width="470" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="590"><div align="center"> </div> <table width="470" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#003366" bgcolor="#E8F4FF">
<tr>
<td><form action='gracias-coti.php' method='post' enctype="multipart/form-data" name='formulario' target='_self' id='formulario'>
<div align="center"></div>
<table width="85%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="244" colspan="5"> <strong class="titulo-bold-12">CARACTERÍSTICAS</strong></td>
</tr>
<tr>
<td width="244" class="style5"><div align="right">Vehículo *
</div></td>
<td colspan="4" class="style5"><select name="select" onChange="MM_callJS('tabla')">
<option selected>Tipo...</option>
<option value="Auto">Auto</option>
<option value="Pick Up">Pick Up</option>
<option value="Camión">Camión</option>
<option value="Maquinaria">Maquinaria</option>
<option value="Otros">Otros</option>
</select></td>
</tr>
<tr>
<td class="style5"><div align="right">Modelo</div></td>
<td colspan="4" class="style5"><input name="Modelo" type="text" id="Modelo" size="30"></td>
</tr>
<tr>
<td colspan="5" class="style5"><div align="right">
</div> </td>
</tr>
<tr>
<td colspan="5"><img src="images/px_azul.gif" width="100%" height="1"></td>
</tr>
<tr>
<td colspan="5" class="txt"><div align="center">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" id="tabla">
<tr>
<td class="style5"><table width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="50%"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="style5"><strong>MEDIDAS</strong> <span class="style6">* </span></td>
</tr>
<tr class="style5">
<td width="254" class="style5"><div align="right">Alto  </div></td>
<td width="377" colspan="2" class="style5">
<input name="Alto" type="text" id="Alto" size="15">
</td>
</tr>
<tr>
<td width="254" class="style5"><div align="right">Largo </div></td>
<td colspan="2" class="style5">
<input name="Largo" type="text" id="Largo" size="15">
</td>
</tr>
<tr>
<td class="style5"><div align="right">Ancho </div></td>
<td colspan="2" class="style5">
<input name="Ancho" type="text" id="Ancho" size="15">
</td>
</tr>
<tr>
<td class="style5"><div align="right">Peso </div></td>
<td colspan="2" class="style5">
<input name="Peso" type="text" id="Peso" size="15">
</td>
</tr>
</table></td>
<td width="50%" valign="top"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="style5"><strong>RUEDA </strong></td>
</tr>
<tr>
<td class="style5"><div align="right">Goma </div></td>
<td colspan="2" class="style5">
<input name="Goma" type="text" id="Goma" size="15">
</td>
</tr>
<tr>
<td class="style5"><div align="right">Oruga </div></td>
<td colspan="2" class="style5">
<input name="Oruga" type="text" id="Oruga" size="15">
</td>
</tr>
<tr>
<td class="style5"><div align="right">Otros </div></td>
<td colspan="2" class="style5">
<input name="Otros" type="text" id="Otros" size="15">
</td>
</tr>
</table></td>
</tr>
</table>
<div align="center"></span> </div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="titulo-bold-12">OBSERVACIONES</td>
</tr>
<tr>
<td colspan="5"><FONT
face=Arial size=-1>
<TEXTAREA name=Observaciones cols=50 rows=5 id="Observaciones"></TEXTAREA>
</FONT></td>
</tr>
</table>
<div align="center">
<table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="64%" height="1"> </td>
<td width="26%"><div align="center">
<input type="image" src="images/ima_enviar.gif" width="119" border="0">
</div></td>
<td width="10%"> </td>
</tr>
</table>
</div>
</form></td>
</tr>
</table></td>
</tr></table>
</BODY>

JavierB · #2 (**permalink**) 21/04/2005, 12:45

Hola Il Dody. Bienvenido al foro.

Para que la tabla no te aparezca al cargar la página, ponla así:

<table style="visibility:hidden"...

El select tienes que cambiarle un poco:

<select name="select" onchange="MM_callJS('tabla',this.selectedIndex)">

y esta sería la función para mostrar/ocultar la tabla:

function MM_callJS(jsStr,num) { //v2.0
obj=document.getElementById(jsStr);
obj.style.visibility = (num>2) ? 'visible' : 'hidden';
}

Saludos,

Il Dody · #3 (**permalink**) 22/04/2005, 10:59

Gracias JavierB por tu ayuda!!!!!!!

Si bien en parte soluciona mi problema, no me yuda del todo ya que esa tabla q oculto mediante hidden sigue ocupando lugar. Me refiero a q si bien la tabla no se ve, si se ve todo el espacio q ocupa ya que debajo de ésta hay otras.

Creo que la solucion sería llamar a un archivo x q se ubique en la posicion q yo le indico y que no me cambie los datos q el usuario ya haya incorporado al form. Me comentaron que lo podia resolver empleando archivos .js No se si este es el caso en el q se puede aplicar! Se entiende? Crees q se pueda hacer?
Muchas gracias!!!

JavierB · #4 (**permalink**) 22/04/2005, 11:14

Hola de nuevo.

Solo tienes que hacer algunos cambios:

<table style="display:none"...

obj.style.display = (num>2) ? 'block' : 'none';

Saludos,

Il Dody · #5 (**permalink**) 22/04/2005, 11:33

Gracias JavierB:

con la primer linea pude hacer q la tabla no se vea y no ocupe lugar. Quedo barbaro!

Ahora el tema es q no se q error estoy cometiendo ya q la tabla no se muestra cuando selecciono la opcion del menu correspondiente!

Pregunto: la segunda linea de texto va en la parte de javascritp y reemplaza a:

obj=document.getElementById(jsStr);
obj.style.visibility = (num>2) ? 'visible' : 'hidden';

Muchas gracias!!!!!!!
Saludos!

JavierB · #6 (**permalink**) 22/04/2005, 12:27

Rehola.

Te pongo la función completa para que sea menos lioso:

function MM_callJS(jsStr,num) { //v2.0
obj=document.getElementById(jsStr);
obj.style.visibility = (num>2) ? 'visible' : 'hidden';
}

Espero que te funcione. Saludos,

Il Dody · #7 (**permalink**) 22/04/2005, 14:18

CAPOOOO!!!!!!!

Muchisimas Gracias JavierB!!!!!!!!! Era exactaamente lo que necesitaba hacer!
Saludos!

JavierB · #8 (**permalink**) 23/04/2005, 02:16

Yupiiiii. Otra muesca más para mi revolver