Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] evento sobre tabla dinamica

Estas en el tema de evento sobre tabla dinamica en el foro de Javascript en Foros del Web. Buenas tardes compañeros del foro. Tengo un dilema por resolver. Tengo una tabla creada en html con id="tablaDinamica" como sigue @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver ...
  #1 (permalink)  
Antiguo 21/02/2018, 15:48
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 122
Antigüedad: 5 años, 4 meses
Puntos: 2
evento sobre tabla dinamica

Buenas tardes compañeros del foro.
Tengo un dilema por resolver.
Tengo una tabla creada en html con id="tablaDinamica" como sigue

Código HTML:
Ver original
  1. <table id="tablaDinamica"></table>
y por medio de javascript le voy agregando datos. Es decir las filas las agrego desde el archivo .js.
y quiero hacer que cuando pase el mause sobre esas filas que se crean con JS me aplique una animacion. Este es el codigo.
Código Javascript:
Ver original
  1. function inicio(){
  2. var tabla=document.getElementById("tablaDinamica");
  3. var filas=tabla.getElementsByTagName("tr");
  4. for(i=0;i<filas.length;i++){
  5. //aplica la animacion sobre la fila indicada
  6. addEvent(filas[i],"mouseover",animacion,false);
  7. }
  8. }
  9.  
  10. function animacion(){
  11.     this.style.background="white";
  12.  }
pero resulta que cuando lo pruevo no aplica la animacion, pero si la aplica a un elemento creado directamente desde el archivo html. Es decir la animacion no se aplica a los elemento creados dinamicamento con JS sino a los que ya se encuentran creados en el archivo html.

¿por que sucede esto, como puedo resolverlo?.

Última edición por dacroma; 21/02/2018 a las 15:54
  #2 (permalink)  
Antiguo 21/02/2018, 16:33
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 10 años, 4 meses
Puntos: 528
Respuesta: evento sobre tabla dinamica

Creo que faltaría el código para ver cómo estás aplicando los eventos a la tabla después de modificar el contenido de la misma. Con el código que muestras, necesitarías llamar a la función "inicio" cada vez que modificas la tabla.

Por otra parte, y considerando que tu animación consiste en cambiar el color de fondo, creo que sería mucho mejor si usas estilos css para esto, con el efecto hover
  #3 (permalink)  
Antiguo 21/02/2018, 16:52
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 122
Antigüedad: 5 años, 4 meses
Puntos: 2
Respuesta: evento sobre tabla dinamica

Si, claro, este es el codigo:
Esta es la tabla, que por defecto tiene el encabezado
Código HTML:
Ver original
  1. <table id="tablaDinamica">
  2.                 <caption style="border:groove;">LISTADO DE PRODUCTOS EN EL CARRITO DE COMPRAS</caption>
  3.                 <th>
  4.                     PRODUCTO
  5.                 </th>
  6.                 <th>
  7.                     PRESENTACION
  8.                 </th>
  9.                 <th>
  10.                     PRECIO
  11.                 </th>
  12.                 <th>
  13.                     CANTIDAD
  14.                 </th>
  15.                 <th>
  16.                     SUBTOTAL
  17.                 </th>
  18.             </table>

El proceso de insercion de los datos en la tabla està bien hecho, es decir los datos se ingresan correctamente.
Este es el codigo JS para obtener las filas de la tabla y aplicar la animacion sobre las mismas.

Código Javascript:
Ver original
  1. function inicio(){
  2. var tabla=document.getElementById("tablaDinamica");
  3.             var filas=tabla.getElementsByTagName("tr");
  4.             for(i=0;i<filas.length;i++){
  5.             addEvent(filas[i],"mouseover",animacion,false);
  6.             }
  7. }
  8.  
  9. function animacion(){
  10.     this.style.webkitAnimationName="animacionTabla";
  11.     this.style.webkitAnimationDuration="0.3s";
  12.    
  13.     this.style.mozAnimationName="animacionTabla";
  14.     this.style.mozAnimationDuration="0.3s";
  15.  }

lo de ponerle el color de fondo fuè para simplificar el problema, por que lo que me doy cuenta es que la animacion se aplica es a elementos creados desde el principio, en el archivo html, y lo mismo sucede al quitar la animacion y cambiarle por ejemplo el color de fondo, pero ninguna de las dos aplica sobre los elementos creados dinamicamente.

Última edición por dacroma; 21/02/2018 a las 17:01
  #4 (permalink)  
Antiguo 21/02/2018, 17:47
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 10 años, 4 meses
Puntos: 528
Respuesta: evento sobre tabla dinamica

mmm Creo que quedamos en las mismas.

viendo tu código, tu función "inicio", es la encargada de aplicar la animación a las filas, pero sigo sin ver cómo o en dónde la llamas después de modificar el contenido de tu tabla.

Cita:
El proceso de insercion de los datos en la tabla està bien hecho, es decir los datos se ingresan correctamente
Al final de este proceso de inserción es donde debes llamar a "inicio", quizá ya lo haces, pero sin ver el código de esta parte es sólo hacer suposiciones.
  #5 (permalink)  
Antiguo 21/02/2018, 19:00
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 122
Antigüedad: 5 años, 4 meses
Puntos: 2
Respuesta: evento sobre tabla dinamica

Ok, te voy a dar un ejemplo. por que el codigo que tengo es muy largo

este es el codigo html para la tabla y los titulos
Código HTML:
Ver original
  1. <table id="tablaDinamica">
  2.                 <caption style="border:groove;">LISTADO DE PRODUCTOS EN EL CARRITO DE COMPRAS</caption>
  3.                 <th>
  4.                     PRODUCTO
  5.                 </th>
  6.                 <th>
  7.                     PRESENTACION
  8.                 </th>
  9.                 <th>
  10.                     PRECIO
  11.                 </th>
  12.                 <th>
  13.                     CANTIDAD
  14.                 </th>
  15.                 <th>
  16.                     SUBTOTAL
  17.                 </th>
  18.             </table>

este es el codigo css de la animacion:

Código CSS:
Ver original
  1. @-webkit-animation{
  2. animationName:animacionTabla;
  3.  los bordes cambian de color
  4. }

y este es el codigo JS

Código Javascript:
Ver original
  1. addEvent(window,"load",inicio,false);//
  2.  
  3. function inicio(){
  4. var boton=document.getElementById("btnEnviar");
  5. addEvent(boton,"click",gravarInfo,false);
  6.  
  7. var tabla=document.getElementById("tablaDinamica");
  8.             var filas=tabla.getElementsByTagName("tr");
  9.             for(i=0;i<filas.length;i++){
  10.             addEvent(filas[i],"mouseover",animacion,false);
  11.             }
  12. }
  13.  
  14. function animacion(){
  15.     this.style.webkitAnimationName="animacionTabla";
  16.     this.style.webkitAnimationDuration="0.3s";
  17.    
  18.     this.style.mozAnimationName="animacionTabla";
  19.     this.style.mozAnimationDuration="0.3s";
  20.  }
  21.  
  22. function gravarInfo(){
  23. //recupero los datos que van a insertarse en la tabla de unas fotos que contienen dichas caracteristicas escritas y cada caracteristicas la guardo en una variable.
  24. var nombre="jabon";
  25. var presentacion="250 ML";
  26. var precio=5000;
  27. var cant_unit=5;
  28. //llamo a la funcion insertarFila()
  29. insertarFila(nombre,presentacion,precio,cant_unit);
  30. }
  31.  
  32.  
  33. function insertarFila(nombre,presentacion,precio,cant_unit){
  34. inserto el valor de cada parametro en la columna correspondiente.
  35. }

lo que hace esto es:
1) carga la pagina y llama a la funcion inicio().
Código Javascript:
Ver original
  1. addEvent(window,"load",inicio,false);
2)insertamos los datos en la tabla
Código Javascript:
Ver original
  1. function insertarFila(nombre,presentacion,precio,cant_unit){
  2. inserto el valor de cada parametro en la columna correspondiente.
  3. }
aqui ya se insertaron los datos en la tabla y queda una tabla algo asi:
nombre | presentacion | precio | cant_unit |
______________________________________
jabon | 500g | 5000 | 5 |

3)dentro de la funcion inicio recorro la tabla y llamo a la funcion animacion().!!que es el codigo que està arriba¡¡ y trato de ponerle el evento que va a hacer que se dispare la animacion.

esas son las unicas funciones que tengo y si le aplico esa animacion a un elemento creado en el archivo html desde el principio, cuando le pongo el mause encima de una me dispara dicha animacion, pero no sucede lo mismo cuando lo pongo con un elemento creado dinamicamente con JS.

No se como acceder a las filas que fueron creadas con JS, es decir no se como llamar a la funcion inicio cada vez que pongo el mause sobre alguna de las filas de la tabla.
Espero me entiendas y asì puedas ayudarme.
Muchas gracias.

Última edición por dacroma; 21/02/2018 a las 19:27
  #6 (permalink)  
Antiguo 21/02/2018, 22:19
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.372
Antigüedad: 3 años, 3 meses
Puntos: 253
Respuesta: evento sobre tabla dinamica

No se que o como lo estas haciendo porque no logro interpretar tu código, pero si lo que quieres es que alguna acción se ejecute una ves agregues lineas dinamicamente, debes invocarla con cada adición debido a que ese item no se encuentra en el dom en ese momento, Ejemplo:

La Clase
Código CSS:
Ver original
  1. .borde{
  2.         cursor:pointer;
  3.         border:solid;
  4.         border-width:2px;
  5.         border-color:#0000ff;
  6.         background-color:#595959;
  7.         color:#ffffff;
  8.     }

el html
Código HTML:
Ver original
  1. <button class="boton">AGREGAR</button>
  2. <table border="1">
  3.     <thead>
  4.         <th>Nombre</th>
  5.         <th>Apellido</th>
  6.         <th>Cedula</th>
  7.     </thead>
  8.     <tbody id="lista">
  9.     </tbody>

el js
Código Javascript:
Ver original
  1. $(function(){
  2.         $(".boton").click(function(){
  3.             $("#lista").append(`<tr>
  4.                 <td>Carlos</td>
  5.                 <td>Quintero</td>
  6.                 <td>Cedula</td>
  7.             </tr>`);
  8.             muestra();//aquí invoco a la función que va a monitorear mis celdas nuevas
  9.         })
  10.     })
  11.  
  12.     function muestra(){
  13.         $("#lista tr").hover(function(){
  14.             $(this).children('td').addClass('borde');
  15.         })
  16.         $("#lista tr").mouseleave(function(){
  17.             $(this).children('td').removeClass('borde');
  18.         })
  19.     }

VER MUESTRA
__________________
[email protected]
HITCEL
  #7 (permalink)  
Antiguo 22/02/2018, 06:08
Avatar de jp91  
Fecha de Ingreso: mayo-2014
Mensajes: 94
Antigüedad: 4 años, 4 meses
Puntos: 11
Respuesta: evento sobre tabla dinamica

Segun tu codigo es claro que la funcion inicio la llamas una sola vez, asi que si agregas nuevas cosas no hay forma de saberlo, deberias pasarle al el evento mouse la funcion que revisa la tabla y si se agregaron nuevos elementos entonces que le agregue una animacion.
__________________
OOoo Como hacer ooOO
juegos con Html5.
  #8 (permalink)  
Antiguo 22/02/2018, 14:13
 
Fecha de Ingreso: mayo-2013
Ubicación: bogota
Mensajes: 122
Antigüedad: 5 años, 4 meses
Puntos: 2
Respuesta: evento sobre tabla dinamica

xfstudios y jp91, dejenme decirles que los dos tienen una retentiva muy desarrollada, eso se debe a la dedicacion en sus profesiones.

Ambos llegaron al mismo punto; !!para que la animacion funcione en cada fila ahi que llamar a la funcion cada vez que se agregue una nueva fila para asi actualizar el codigo y pueda funcionar.¡¡.

A todos muchas gracias por aportar a la solucion de este problema.

Última edición por dacroma; 22/02/2018 a las 14:19
  #9 (permalink)  
Antiguo 22/02/2018, 16:27
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 10 años, 4 meses
Puntos: 528
Respuesta: evento sobre tabla dinamica

O sea, básicamente, lo que te indiqué desde un inicio:

Cita:
Con el código que muestras, necesitarías llamar a la función "inicio" cada vez que modificas la tabla

Etiquetas: dinamica, evento, html, java, tabla
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 17:30.