[SOLUCIONADO] evento sobre tabla dinamica

[dacroma]

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:

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

function inicio(){
var tabla=document.getElementById("tablaDinamica");
var filas=tabla.getElementsByTagName("tr");
for(i=0;i<filas.length;i++){
//aplica la animacion sobre la fila indicada
addEvent(filas[i],"mouseover",animacion,false);
}
}
 
function animacion(){ 
    this.style.background="white";
 }
 

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

[ocp001a]

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

[dacroma]

Si, claro, este es el codigo:
Esta es la tabla, que por defecto tiene el encabezado

Código HTML:

<table id="tablaDinamica">
                <caption style="border:groove;">LISTADO DE PRODUCTOS EN EL CARRITO DE COMPRAS</caption>
                <th>
                    PRODUCTO
                </th>
                <th>
                    PRESENTACION
                </th>
                <th>
                    PRECIO
                </th>
                <th>
                    CANTIDAD
                </th>
                <th>
                    SUBTOTAL
                </th>
            </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:

function inicio(){
var tabla=document.getElementById("tablaDinamica");
            var filas=tabla.getElementsByTagName("tr");
            for(i=0;i<filas.length;i++){
            addEvent(filas[i],"mouseover",animacion,false);
            }
}
 
function animacion(){ 
    this.style.webkitAnimationName="animacionTabla";
    this.style.webkitAnimationDuration="0.3s";
    
    this.style.mozAnimationName="animacionTabla";
    this.style.mozAnimationDuration="0.3s";
 }
 

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.

[ocp001a]

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.

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.

[dacroma]

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:

<table id="tablaDinamica">
                <caption style="border:groove;">LISTADO DE PRODUCTOS EN EL CARRITO DE COMPRAS</caption>
                <th>
                    PRODUCTO
                </th>
                <th>
                    PRESENTACION
                </th>
                <th>
                    PRECIO
                </th>
                <th>
                    CANTIDAD
                </th>
                <th>
                    SUBTOTAL
                </th>
            </table>
 

este es el codigo css de la animacion:

Código CSS:

@-webkit-animation{
animationName:animacionTabla;
 los bordes cambian de color
}
 

y este es el codigo JS

Código Javascript:

addEvent(window,"load",inicio,false);//
 
function inicio(){
var boton=document.getElementById("btnEnviar");
addEvent(boton,"click",gravarInfo,false);
 
var tabla=document.getElementById("tablaDinamica");
            var filas=tabla.getElementsByTagName("tr");
            for(i=0;i<filas.length;i++){
            addEvent(filas[i],"mouseover",animacion,false);
            }
}
 
function animacion(){ 
    this.style.webkitAnimationName="animacionTabla";
    this.style.webkitAnimationDuration="0.3s";
    
    this.style.mozAnimationName="animacionTabla";
    this.style.mozAnimationDuration="0.3s";
 }
 
function gravarInfo(){
//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.
var nombre="jabon";
var presentacion="250 ML";
var precio=5000;
var cant_unit=5;
//llamo a la funcion insertarFila()
insertarFila(nombre,presentacion,precio,cant_unit);
}
 
 
function insertarFila(nombre,presentacion,precio,cant_unit){
inserto el valor de cada parametro en la columna correspondiente.
}
 

lo que hace esto es:
1) carga la pagina y llama a la funcion inicio().

Código Javascript:

addEvent(window,"load",inicio,false);
 

2)insertamos los datos en la tabla

Código Javascript:

function insertarFila(nombre,presentacion,precio,cant_unit){
inserto el valor de cada parametro en la columna correspondiente.
}
 

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.

[xfxstudios]

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:

.borde{
        cursor:pointer;
        border:solid;
        border-width:2px;
        border-color:#0000ff;
        background-color:#595959;
        color:#ffffff;
    }
 

el html

Código HTML:

<button class="boton">AGREGAR</button>
<table border="1">
    <thead>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Cedula</th>
    </thead>
    <tbody id="lista">
    </tbody>
</table>
 

el js

Código Javascript:

$(function(){
        $(".boton").click(function(){
            $("#lista").append(`<tr>
                <td>Carlos</td>
                <td>Quintero</td>
                <td>Cedula</td>
            </tr>`);
            muestra();//aquí invoco a la función que va a monitorear mis celdas nuevas
        })
    })
 
    function muestra(){
        $("#lista tr").hover(function(){
            $(this).children('td').addClass('borde');
        })
        $("#lista tr").mouseleave(function(){
            $(this).children('td').removeClass('borde');
        })
    }
 

VER MUESTRA

[jp91]

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.

[dacroma]

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.

[ocp001a]

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

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