En el articulo anterior se toco (míralo acá) el tema de la función .each de jQuery, y se comento que haciendo uso de la misma es posible recorrer elementos de una forma bastante sencilla y eficiente, y se mostro un ejemplo bastante sencillo.

En este caso quiero mostrar como podemos recorrer una tabla y en que momento podríamos hacer uso de ajax para ir guardando lo datos contra la base de datos de forma asíncrona.

Imagen1

El código necesario para recorrer la tabla es:


$(function () {
    $("#btnRecorrer").click(function () 
    {
        $("#tabla tbody tr").each(function (index) 
        {
            var campo1, campo2, campo3;
            $(this).children("td").each(function (index2) 
            {
                switch (index2) 
                {
                    case 0: campo1 = $(this).text();
                            break;
                    case 1: campo2 = $(this).text();
                            break;
                    case 2: campo3 = $(this).text();
                            break;
                }
                $(this).css("background-color", "#ECF8E0");
            })
            alert(campo1 + ' - ' + campo2 + ' - ' + campo3);
        })
    })
})

Bueno y como funciona, pues es fácil:

Dentro del clic del botón,entonces mediante la función each recorremos todos las filas (tr) del cuerpo (body) de la tabla, por ello el selector es: $(”#tabla tbody tr”), como nuestra tabla tiene tres columnas entonces declaramos tres variables (también podríamos haber usado un array), en la línea 5 entonces a la fila actual, en este caso $(this) le decimos que seleccione los hijos que sean de tipo celda (td) y con la función each los recorremos todos.

En la variable index2 tenemos el índice de cada celda (td), por lo tanto hacemos uso de un switch para asignar a cada variable el valor de la celda, recuerden que la celda 1 inicia por el índice 0, y en la línea 17 se le cambia el color de fondo a la celda para indicar que ya ha sido leída.

Finalmente en la línea 19 mediante un alert mostramos los valores de las tres columnas, en este caso podríamos hacer uso de $.ajax y realizar un guardado contra la base de datos.

Como siempre dejo el código fuente:

Descarga del ejemplo !