Ocultar mostrar tablas

helthon · #1 (**permalink**) 17/11/2005, 11:42

Hola a todos

Estoy haciendo una web y se me ocurrio poner una opcion de ver mas con solo apretar un icono me muestre los detalles de cada cliente.

En realidad todos los detalles estaran en la misma Hoja pero en estado invisble ya cuando se apriete el boton recien se mostrara la tabla con dichos datos

Ahora no tengo idea de que comandos se utilizan para poder realizar este efecto agaredecere alguno is me brinda una idea o tiene algune ejemplo desarrollado

Gracias

JavierB · #2 (**permalink**) 17/11/2005, 12:09

Hola helthon

Echa un ojo a este mensaje:

http://www.forosdelweb.com/f13/mostrar-ocultar-tablas-mediante-boton-opcion-350143/

Saludos,

helthon · #3 (**permalink**) 17/11/2005, 12:16

Si gracias JavierB

Y alo habia encontrado

helthon · #4 (**permalink**) 17/11/2005, 12:33

Estuve viendo el ejemplo quie me enviaste y si sale

Pero ahor atengo un problemita yo lo estoy condicionando a mi web k esta en php y la que tengo un while($row = mysql_fetch_array($result))

Cuando lo ejecuto no me muestra los detalles :(

Como hacer que se genere tantas veces tenga a mi Registro de Mi B.D.

mi codigo es

Script

Código HTML:

<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>

Mi codigo PHP

Código PHP:

 
<table width="450" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#F3F3F3" class="en-3"> 
  <tr bgcolor="#6B84C3" class="titulocelda"> 
    <td width="211"><div align="center">CLIENTE</div></td> 
    <td bgcolor="#6B84C3"><div align="center">STAND</div></td> 
    <td width="167"><div align="center">RUBRO</div></td> 
  </tr> 
  <? 
require_once('../conexion/conectar.php');       
$result=mysql_query("SELECT * FROM `expositores`  ORDER BY `idexpo` DESC", $dbh); 
while($row = mysql_fetch_array($result))  
{    
echo'  <tr bgcolor="#FFFFFF" class="textotablacelda">'; 
echo'    <td height="15"> '.$row["nombre"].' </td>'; 
echo'    <td height="15" bgcolor="#FFFFFF"><div align="center">'.$row["stand"].'</div></td>'; 
echo'    <td height="15">'.$row["rubro"].' </td>'; 
echo'  </tr>'; 
echo'  <tr bgcolor="#FFFFFF">'; 
echo'    <td height="15" colspan="3"><div align="right"><a href="" Onclick="viewHide("tabla1")" value="A"><img src="../imagenes/botones/masinformacion.jpg" width="97" height="12" border="0"></a></div></td>'; 
echo'  </tr>'; 
echo'  <tr bgcolor="#FFFFFF">'; 
echo'    <td colspan="3">'; 
//      <!--datos del expositor--> 
echo'      <table id=tabla1  width="100%" border="0" style="display:none" cellpadding="0" cellspacing="0">'; 
echo'        <tr>'; 
echo'          <td valign="top" class="textotablacelda">'.$row["detalle"].'</td>'; 
echo'        </tr>'; 
echo'      </table>'; 
//    <!--FIN datos del expositor--> 
echo'    </td>'; 
echo'  </tr> '; 
  }  
mysql_free_result($result);  
mysql_close($dbh);     
?> 
</table>

No se si estara bien postearlo en este canal de Java o en PHP

Espero que me des una ayudadita

Gracias

lidmartins · #5 (**permalink**) 17/11/2005, 13:32

Hola helthon ...

Si quieres que te muestre el resultado de tu busqueda en la BD de acuerdo a la opcion lo puedes hacer con capas y javascript... aqui te mando un ejemplo..

capas.php

Código PHP:

  <html> 
<body> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function showdiv(pass) {  
  var divs = document.getElementsByTagName('div');  
 for(i=0;i<divs.length;i++){  
    if(divs[i].id.match(pass)){//if they are 'see' divs  
      if (document.getElementById) // DOM3 = IE5, NS6  
        divs[i].style.visibility="visible";// show/hide  
      else  
         if (document.layers) // Netscape 4  
             document.layers[divs[i]].display = 'visible';  
         else // IE 4  
             document.all.divs[i].visibility = 'visible';  
    } else {  
      if (document.getElementById)  
          divs[i].style.visibility="hidden";  
      else  
         if (document.layers) // Netscape 4  
             document.divs[i].visibility = 'hidden';  
         else // IE 4  
             document.all.divs[i].visibility = 'hidden';  
    }  
  } 
} 
//--> 
</SCRIPT> 
<table cellpadding=2 cellspacing=2 border=1 width=100% align=center> 
 <form name=CMSFORM method=post action="#"> 
<tr> 
    <table cellpadding=2 cellspacing=2 border=1 width=100% align=center> 
         <tr> 
            <td width=33% class=datos bgcolor=#cccccc> 
                <a href="javascript:showdiv('notes')" class=datos>Notes</a>     
            </td> 
            <td class=datos width=33% bgcolor=#cccccc> 
                <a href="javascript:showdiv('history')" class=datos>History</a> 
            </td> 
            <td class=datos width=34% bgcolor=#cccccc> 
                <a href="javascript:showdiv('document')" class=datos>Document</a> 
            </td> 
         </tr> 
    </table> 
</tr> 
 
<tr> 
<div id="main" style="position: relative; background-color: #FFFFFF; left:0; border: 1px none #000000; visibility: visible; height: 100; width: 460"> 
<div id=notes style="position: absolute; background-color: #878756; border: 1px none #000000; left: 2; height: 100; width:500; overflow:auto; visibility: hidden"> 
 
<table cellpadding=2 cellspacing=2 border=1 width=100% align=center> 
    <tr> 
        <td align=right><b>Marca1:</b></td> 
        <td align=left><input type=text name=mark1></td> 
     
        <td align=right><b>Marca22:</b></td> 
        <td align=left><input type=text name=mark22></td> 
 
    </tr> 
</table> 
 
</div> 
</tr> 
 
 
<!-- *********** --> 
<tr> 
<div id="history" style="position: absolute; background-color: #AAAAAA; border: 1px none #000000; left: 2; height: 100; width:500; overflow:auto; visibility: hidden"> 
 
<table cellpadding=2 cellspacing=2 border=1 width=100% align=center> 
<tr> 
    <td align=right><b>history</b></td> 
    <td align=left><input type=text name=mark1></td> 
     
    <td align=right><b>history22:</b></td> 
    <td align=left><input type=text name=mark22></td> 
 
</tr> 
</table> 
 
</div> 
</tr> 
 
<!-- *********** --> 
 
</tr> 
<div id=document style="position: absolute; background-color: #FFFFFF; border: 1px none #000000; left: 2; height: 100; width:500; overflow:auto; visibility: hidden"> 
 
<table cellpadding=2 cellspacing=2 border=1 width=100% align=center> 
    <tr> 
        <td align=right><b>document</b></td> 
        <td align=left><input type=text name=mark1></td> 
     
        <td align=right><b>document22:</b></td> 
        <td align=left><input type=text name=mark22></td> 
    </tr> 
</table> 
</div> 
</tr> 
 
<!-- ************* --> 
 
</div> <!-- div main --> 
<form> 
</table> 
 
</body> 
</html>

Solo tienes que hacer los cambios para que genere la busqueda en la BD...

Espero que te sirva....

helthon · #6 (**permalink**) 17/11/2005, 14:14

Hola lidmartins

MIra yo tengo esto http://www.perudesign.com/~hcperu/admin/expositores.phpGentrado de una Base de datos ahora lo k deseo es hacer que cuando le den clic en +informacion se vea la tabla que esta oculta.

Ahora tu ejemplo es dependiendo tus 3 opciones 'notes' , 'history', document

Yo no se cuantos registros se podran sumar como para poder poner

lidmartins · #7 (**permalink**) 18/11/2005, 12:36

Hola......

Si efectivamente las capas de el codigo que te di, son note, history y document (estas tres capas o <div> deben estar englobadas por la etiqueta principal <div id="main" ...> (las capas note-history-document) </div>)... ademas cada capa (<div>) debe contener una tabla el cual tendrá el contenido que deseas mostrar, de acuerdo a la opcion de click... ahora bien el script showdiv(pass) lo que hace es tomar el div del cual se hizo click (eso es por medio del enlace href: "javascript:showdiv('ID_DIV')" donde ID_DIV es note, history o document) y olcutara las capas no seleccionadas y mostrara la capa seleccionada.

Ahora si quieres llenar esa tabla por la BD eso lo debes hacer por ejemplo con PHP... haces el query y luego accesas a los datos de ese query por medio de la instruccion:

Código PHP:

  $row = pg_fetch_array ($query);

donde $query es la variable donde almacenas la consulta.... ejemplo:

Código PHP:

  $query = pg_query($conexion, "select groupcode, model from product where id_prod = '" . $id . "'");

y accesas a los atributos de esa busqueda, por ejemplo:

Código PHP:

  $groupcode = $row["groupcode"];

y alli haces uso de la variable cuando quieres...

o si la quieres imprimir, colocas...

Código PHP:

 
<td align=left><?php echo $row["model"]?></td>

Espero que te sirva... Vi tu pagina y el codigo... y no estas haciendo uso bien de las etiquetas div .. recuerda que esas etiquetas div son las capas y dentro de cada div debes tener la tabla del cual quieres mostrar... recuerda que eso lo haces con..:

Código PHP:

  <a href="javascript:showdiv('notes')" class=datos>Notes</a>

CIAO!!!

lidmartins · #8 (**permalink**) 18/11/2005, 12:39

Por cierto.. el ejemplo que di anterior, lo puedes copiar tal cual y ejecutarlo en tu maquina, sin ningun tipo de servidor web.

Ciao