Menu desplegable doble click en javascript o css?

catal · #1 (**permalink**) 22/04/2008, 09:46

Buenas tardes,

Tengo que hacer un menu desplegable al hacer doble click a una celda de una tabla. Concretamente ha esta,

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<SCRIPT language=JavaScript>
function cogerDato(celda) 
{
     destino = document.getElementById("instancia");
     destino.value = celda.innerHTML;
}  
</script>
</head>

<body>
<table width="50%" border="1" align="center">
  <tr><td id="hola" ondblclick="cogerDato(this)">HOLA</td><td id="tardes" ondblclick="cogerDato(this)">TARDES</td><td id="noches" ondblclick="cogerDato(this)">NOCHES</td></tr>
  <tr><td id="buenos" ondblclick="cogerDato(this)">BUENOS</td><td id="dias" ondblclick="cogerDato(this)">DIAS</td><td id="semanas" ondblclick="cogerDato(this)">SEMANAS</td></tr>
  <tr><td id="adios" ondblclick="cogerDato(this)">ADIOS</td><td id="meses" ondblclick="cogerDato(this)">MESES</td><td id="años" ondblclick="cogerDato(this)">A&Ntilde;OS</td></tr>
</table>
<form id="form1" name="form1" method="post" action="">
  <div align="center">
  <input id="instancia" name="instancia" type="text" value="" size="8" maxlength="8"/> 
  <input type="submit" name="Submit" value="UPDATE" />
  </div>
</form>
<p>&nbsp;</p>
</body>
</html>

Lo que pasa es que necesito el valor de la celda y no se si en css puedo capturar/mostrar. Y en javascript es muy complicado para mi nivel.

He visto varios scripts por la red en que me sale un menu desplegable, pero el problema es vincularlo en la celda y ha su valor. (No creais que no lo he intentado......)

Algun comentario que me aporte una poca luz a las tinieblas de mi cabeza?

Gracias.

alfredo_m · #2 (**permalink**) 22/04/2008, 09:56

Recuerda que no debes poner innerHTML..

Cita:

destino = document.getElementById("instancia");
destino.value = celda.innerHTML;

debe ser:

Cita:

destino = document.getElementById("instancia");
destino.value = celda.outerHTML;//Outer obtiene el valor del elemento, en HTML

catal · #3 (**permalink**) 22/04/2008, 10:09

Haber, si quisiera que en esta linea en ves de poner 1 pusiera el valor (celda.outerHTML), como lo tendria que escribirlo con una variante?

<DIV class=menuitems target="_top" url="#">• Opción Nº 1</DIV>

alfredo_m · #4 (**permalink**) 22/04/2008, 10:28

Lo que muestras en tu codigo me hace referencia a que tenemos unos <td> con ciertos id y los valores de esos TD ej;

Cita:

td id="hola" onclick="cogerDato(this)">HOLA</td>

necesitas que en input

Cita:

aparesca "HOLA", si es así, la forma que lo haces estaría bien, no devería darte más complicaciones en traer el valor que contiene el id que envias, si no funciona, puedes comprobar y en vez de colocarlos en los td usar div's:

Cita:

así puedes verificar correctamente el funcionamiento, ya que en div's fuenciona mejor.

lo otro es onclickno ondblclick

catal · #5 (**permalink**) 22/04/2008, 10:45

Dejando a un lado el onclick o ondblclick, no he entendido como puedo mostrar el valor de la celda en

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<SCRIPT language=JavaScript>
function cogerDato(celda) 
{
     destino = document.getElementById("instancia");
     destino.value = celda.innerHTML;
}  
</script>
</head>

<body>
<table width="50%" border="1" align="center">
  <tr><td id="hola" ondblclick="cogerDato(this)">HOLA</td><td id="tardes" ondblclick="cogerDato(this)">TARDES</td><td id="noches" ondblclick="cogerDato(this)">NOCHES</td></tr>
  <tr><td id="buenos" ondblclick="cogerDato(this)">BUENOS</td><td id="dias" ondblclick="cogerDato(this)">DIAS</td><td id="semanas" ondblclick="cogerDato(this)">SEMANAS</td></tr>
  <tr><td id="adios" ondblclick="cogerDato(this)">ADIOS</td><td id="meses" ondblclick="cogerDato(this)">MESES</td><td id="años" ondblclick="cogerDato(this)">A&Ntilde;OS</td></tr>


<p>
Aqui es donde me muestra el valor quando hago doble click -> AQUI <-
<p>



</table>
<form id="form1" name="form1" method="post" action="">
  <div align="center">
  <input id="instancia" name="instancia" type="text" value="" size="8" maxlength="8"/> 
  <input type="submit" name="Submit" value="UPDATE" />
  </div>
</form>
<p>&nbsp;</p>
</body>
</html>

Donbe pone -> AQUI <- . Cambio el innerHTML por outerHTML y en la linea de html que pongo?

Gracias.

alfredo_m · #6 (**permalink**) 22/04/2008, 11:33

si deseas puedes probar algo como esto:

Código HTML:

<script language="javascript">
function pressf(objeto){
var donde=document.getElementById('acam');//Recuerden que esto es para IE
donde.value=objeto.value;
}
</script>

<table>
<tr><td><div id="press" onclick="pressf(this);" value="Presionado">Presioname</div></td></tr>
</table>

<input type="text" id="acam" name="acam">

funciono sin ningún problema, colocando un value a un div, puedes colocar lo que te interesa y luego para poder mostrarlo solos le colocas al objeto.value