Foros del Web » Programando para Internet » Javascript »

Problema para Mostrar/ocultar tablas!

Estas en el tema de Problema para Mostrar/ocultar tablas! en el foro de Javascript en Foros del Web. Hola a todos: tengo varias imagenes a modo de boton que al cliquear en ellas deben mostrar la tabla (que inicialmente estan ocultas) correspondiente a ...
  #1 (permalink)  
Antiguo 28/06/2010, 08:33
Avatar de Il Dody  
Fecha de Ingreso: abril-2005
Ubicación: Argentina
Mensajes: 88
Antigüedad: 19 años
Puntos: 1
Exclamación Problema para Mostrar/ocultar tablas!

Hola a todos:

tengo varias imagenes a modo de boton que al cliquear en ellas deben mostrar la tabla (que inicialmente estan ocultas) correspondiente a la imagen (las tablas se deben reemplazar en el mismo lugar y se deben ver de a una por vez).

Les pego el codigo. Creo que estoy cerca de lograrlo pero no me doy cuenta donde cometi el error!

<html>
<head>
<script type="text/javascript">
function hide(id){
document.getElementById('tabla'+id).style.display = false;
}
function show(id){
document.getElementById('tabla'+id).style.display = true;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('images/bt-BMW-M6_.jpg','images/bt-BMW-x1_.jpg')">
<p><a href="javascript:display('tabla1')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/bt-BMW-M6_.jpg',1)"><img src="images/bt-BMW-M6.jpg" name="Image10" width="160" height="65" border="0" id="Image10" /></a></p>
<p><a href="javascript:display('tabla2')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/bt-BMW-x1_.jpg',1)"><img src="images/bt-BMW-x1.jpg" name="Image9" width="160" height="65" border="0" id="Image9" /></a></p>
<p>
<div id="tabla1" >
<table width="90%" border="1" align="center" cellpadding="5" cellspacing="2" bordercolor="#CCCCCC" bgcolor="#F4FAFF" id="tabla1" style="display:none" >
<tr>
<td colspan="3" bgcolor="#999999"><div align="center" class="txt-14">Tabla 1</div></td>
</tr>
<tr class="txt">
<td width="6%" bgcolor="#DDEDFF" ><div align="center">Cliente</div></td>
<td width="7%" bgcolor="#DDEDFF" ><div align="center">Modelo</div></td>
<td width="18%" bgcolor="#DDEDFF"><div align="center">Vin</div></td>
</tr>
<tr class="txt">
<td ><div align="center">BMW</div></td>
<td ><div align="center">M6</div></td>
<td><div align="center">WBSEH9109AB780774</div></td>
</tr>
</table>
<table width="90%" border="1" align="center" cellpadding="5" cellspacing="2" bordercolor="#CCCCCC" bgcolor="#F4FAFF" id="tabla2" style="display:none" >
<tr>
<td colspan="3" bgcolor="#999999"><div align="center" class="txt-14">Tabla 2</div></td>
</tr>
<tr class="txt">
<td width="6%" bgcolor="#DDEDFF" ><div align="center">Cliente</div></td>
<td width="7%" bgcolor="#DDEDFF" ><div align="center">Modelo</div></td>
<td width="18%" bgcolor="#DDEDFF"><div align="center">Vin</div></td>
</tr>
<tr class="txt">
<td ><div align="center">BMW</div></td>
<td ><div align="center">M6</div></td>
<td><div align="center">WBSEH9109AB780774</div></td>
</tr>
</table>
</div>
*</p>
</body>
</html>

Muchas gracias por la ayuda!!
Saludos.
__________________
IL DODY

Última edición por Il Dody; 28/06/2010 a las 08:41
  #2 (permalink)  
Antiguo 28/06/2010, 08:51
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 8 meses
Puntos: 87
Respuesta: Problema para Mostrar/ocultar tablas!

El principal problema es que en tus imagenes estas llamando a una funcion display() que no existe.. al menos en el codigo que pusiste.

las funciones que tienes son: show() para mostrar y hide() para ocultar.


osea que tendrías que modificar tus links a:

Código HTML:
<a onclick="javascript: show('tabla1')" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('Image10','','images/bt-BMW-M6_.jpg',1)"> 
y modificar tus funciones a:


Código HTML:
function hide(id){ 
document.getElementById(id).style.display = "none"; 
} 
function show(id){ 
document.getElementById(id).style.display = "block"; 
}
  #3 (permalink)  
Antiguo 28/06/2010, 09:04
Avatar de Il Dody  
Fecha de Ingreso: abril-2005
Ubicación: Argentina
Mensajes: 88
Antigüedad: 19 años
Puntos: 1
Respuesta: Problema para Mostrar/ocultar tablas!

Hola quike88

Gracias por tu respuesta! La probé pero no funciona. Sigue sin mostrarme las tablas al cliquear en las imagenes.

Crees que lo pueda solucionar de otra manera?
Gracias de nuevo.
Saludos!
__________________
IL DODY
  #4 (permalink)  
Antiguo 28/06/2010, 09:14
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 8 meses
Puntos: 87
Respuesta: Problema para Mostrar/ocultar tablas!

mm..te da algún error?? si usas el IE te muestra un icono de advertencia en la esquina izquierda inferior, y al hacer doble click te dice el error
  #5 (permalink)  
Antiguo 28/06/2010, 09:37
Avatar de Il Dody  
Fecha de Ingreso: abril-2005
Ubicación: Argentina
Mensajes: 88
Antigüedad: 19 años
Puntos: 1
Respuesta: Problema para Mostrar/ocultar tablas!

hola!
Encontre que tenia un DIV que molestaba! Ahora funciona! Osea, muestra la tabla correspondiente!

Ahora necesitaria que se vea una tabla por vez: cuando cliqueo en la img 1, se vea la tabla 1 y cuando cliqueo en la img 2, se vea la tabla 2 (y desaparezca la 1). En este momento si estoy la 1 aparece la 2 y la 1 no desaparece.

Se te ocurre como puedo hacer eso?

Gracias por tu ayuda!
Saludos.
__________________
IL DODY
  #6 (permalink)  
Antiguo 28/06/2010, 09:51
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 8 meses
Puntos: 87
Respuesta: Problema para Mostrar/ocultar tablas!

podrías hacer algo así:

Código:
function show(id){
if(document.getElementById('tabla1').style.display=="block")
  hide('tabla1');
if(document.getElementById('tabla2').style.display=="block")
  hide('tabla2');
document.getElementById(id).style.display = "block"; 
}
  #7 (permalink)  
Antiguo 28/06/2010, 11:19
Avatar de Il Dody  
Fecha de Ingreso: abril-2005
Ubicación: Argentina
Mensajes: 88
Antigüedad: 19 años
Puntos: 1
Respuesta: Problema para Mostrar/ocultar tablas!

Hola quike88!

no funciona como necesito. Muestra la tabla 1 pero la misma no desaparece al cliquear en la 2 o 3.... y las otras tablas no aparecen al cliquear en la imagen correspondiente.

Espero que puedas seguir ayudandome. Realmente me estas dando una mano grande.

Saludos!
__________________
IL DODY
  #8 (permalink)  
Antiguo 28/06/2010, 11:41
Avatar de Il Dody  
Fecha de Ingreso: abril-2005
Ubicación: Argentina
Mensajes: 88
Antigüedad: 19 años
Puntos: 1
Respuesta: Problema para Mostrar/ocultar tablas!

Hola...

Encontre otra funcion:

function cambiarDisplay(id) {
if (!document.getElementById) return false;
fila = document.getElementById(id);
if (fila.style.display != "none") {
fila.style.display = "none"; //ocultar fila
} else {
fila.style.display = ""; //mostrar fila
}
}


y ademas agregue:
onClick="cambiarDisplay('tabla1')"

asi funciona bien. Lo unico que no hace es reemplazar la tabla, sino que llama a la tabla correspondiente y deja ver las otras que ya se mostraron.

Quizas cambiando algo pueda hacer que la tabla mostrada se oculte sin tener que cliquear de nuevo en ese boton (como sucede ahora).

Saludos.
__________________
IL DODY
  #9 (permalink)  
Antiguo 29/06/2010, 08:33
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 8 meses
Puntos: 87
Respuesta: Problema para Mostrar/ocultar tablas!

si no me equivoco, esa función estaba en un post, donde no le funcionaba en IE no? a ti te funciona?

el numero de tablas que tienes es estático?? o tienes un número indefinido de tablas?

Etiquetas: tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:33.