Foros del Web » Programando para Internet » Javascript »

ondblclick aplicado a muchos elementos html

Estas en el tema de ondblclick aplicado a muchos elementos html en el foro de Javascript en Foros del Web. Saludos comunidad, les agradecería mucho que me pudieran ayudar con lo siguiente en JS. tengo un <table></table> en donde muestro muchos registros de usuarios(estos los ...
  #1 (permalink)  
Antiguo 27/04/2016, 09:40
 
Fecha de Ingreso: marzo-2014
Mensajes: 64
Antigüedad: 10 años, 1 mes
Puntos: 1
ondblclick aplicado a muchos elementos html

Saludos comunidad, les agradecería mucho que me pudieran ayudar con lo siguiente en JS. tengo un <table></table> en donde muestro muchos registros de usuarios(estos los imprimo con un while en php), y me pideron que cada vez que haga doble click en una fila, me debe de redireccionar a un sitio con informacion detallada de los elementos que contiene la fila.
Bueno la parte de la redireccion y el doble click ya lo tengo pero solo se aplica a una y solo una fila que es la primera, es decir que si doy click sobre la 12ava linea me lleva a la url como si fuera para la primera fila :(

Código Javascript:
Ver original
  1. <script>
  2. function myFunction()  {
  3.                window.location='$ruta/panel/$user_get/user'+document.getElementById('demo').innerHTML;
  4.      }
  5.  </script>

Como le podria hacer para que me detectara la fila en la que estoy ??? es decir que si estoy en la fila 12 me saque lo que hay en esa fila para redireccionar y no lo que hay en la fila 1
  #2 (permalink)  
Antiguo 27/04/2016, 18:56
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: ondblclick aplicado a muchos elementos html

Si utilizas JavaScript inline, bastaría con que, en la llamada a la función, asignes la palabra reservada this como argumento:
Código HTML:
Ver original
  1. <... ondblclick="myFunction(this)">

Y en la función, recibirías a dicho valor como argumento por referencia:
Código Javascript:
Ver original
  1. function myFunction(self){
  2.     location = "$ruta/panel/$user_get/user" + self.innerHTML;
  3. }

Una forma más moderna y limpia de hacerlo, consiste en delegar el evento, en este caso, el doble clic, al elemento que contiene a las filas y columnas, mismo que debería ser el cuerpo de la tabla (<tbody>) o la tabla (<table>). Una vez realizado y detectado esto, se procede a acceder al elemento directamente afectado por el evento mediante la propiedad target del objeto del evento:
Código Javascript:
Ver original
  1. document.getElementById("id de la tabla").addEventListener("dblclick", function(event){
  2.     location = "$ruta/panel/$user_get/user" + event.target.innerHTML;
  3. }, false);

Por como veo que lo has hecho, deduzco que, el contenido de una de las celdas de cada fila, contiene el valor que deseas adherir a la ruta. El problema con ambas formas está en que, si el usuario da el doble clic sobre cualquier parte de la tabla y esta no tiene como contenido al valor en cuestión, se enviaría lo que sea que contenga el elemento afectado, por lo cual es necesaria una condición. Por ejemplo, podrías asignar una clase a todas las celdas de cada fila que contengan al valor en cuestión, así la condición sería la siguiente:
Código Javascript:
Ver original
  1. if (event.target.className == "clase"){
  2.     //Realizas la redirección
  3. }

Utilizando la segunda forma, ya no será necesario insertar JavaScript inline (en la etiqueta HTML) ni crear una función aparte.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: elementos, html, js, muchos, php
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 02:54.