evento sobre tabla dinamica

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