Recorriendo un tabla con jQuery [.each]

Posted on Actualizado enn


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:

     1: $(function () {

   2:      $("#btnRecorrer").click(function () {
   3:          $("#tabla tbody tr").each(function (index) {
   4:              var campo1, campo2, campo3;
   5:              $(this).children("td").each(function (index2) {
   6:                  switch (index2) {
   7:                      case 0:
   8:                          campo1 = $(this).text();
   9:                          break;
  10:                      case 1:
  11:                          campo2 = $(this).text();
  12:                          break;
  13:                      case 2:
  14:                          campo3 = $(this).text();
  15:                          break;
  16:                  }
  17:              $(this).css("background-color", "#ECF8E0");
  18:              })
  19:          alert(campo1 + ' - ' + campo2 + ' - ' + campo3);
  20:          })
  21:      })
  22:  })

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 !

57 comentarios sobre “Recorriendo un tabla con jQuery [.each]

    nicoloco93 escribió:
    05/13/2011 en 15:32

    Woow, excelente post!! muestra la facilidad y la eficacia de JQuery. . .haciendo operaciones complejas en el DOM.

    nicoloco93 escribió:
    05/13/2011 en 15:35

    La funcion Each, es sin duda de gran utilidad para recorrer colecciones ya sean de datos o de controles, dandoles el correcto uso nos pueden ayudar a salir de problemas sin necesidad de volver al servidor.

      Julio Avellaneda respondido:
      05/14/2011 en 10:49

      Asi es Nicoloco…jQuery permite realizar tareas q antes llevaban un gran esfuerzo, escribir esa misma rutina con javascript puro creo q seria algo un poco más complicado… claro no digo q se deba aprender, solo digo q no se debe reinventar la rueda, y se debe aprovechar cada tool que no permita ser más competitivos y eficientes…

    Uriel Ramos escribió:
    06/24/2011 en 15:04

    uchhhh re bien 10+ excelente

    magga escribió:
    12/27/2011 en 10:54

    Muy bueno… pero como hago para entrar a un tr del que se su ID? ojala puedan ayudarme!

      Julio Avellaneda respondido:
      12/27/2011 en 11:04

      hola, pero si ya tienes el id entonces puedes acceder a el utilizando un selector por id:
      $(“#td1”)
      cualquier duda no dudes en colocarla

        magga escribió:
        12/27/2011 en 11:09

        tengo el id del “tr” pero no de sus td’s y kiero obtener los datos que tengan esos td’s

        Julio Avellaneda respondido:
        12/27/2011 en 11:16

        Ok, es sencillo, mira te pongo el código:
        $(“#tr1 td”).each(function(e){
        alert($(this).html());
        })

        donde tr1 es el id de tu tr

        magga escribió:
        12/27/2011 en 11:38

        Gracias x tu tiempo! en verdad lo valoro (Y) e probado el codigo:
        $(“#fi-0 td”).each(function(e){
        alert($(this).html());
        switch (e) {
        case 1:
        alert($(this).text());
        break;
        case 2:
        alert($(this).text());
        break;
        case 3:
        alert($(this).text());
        break;
        }
        })

        donde fi-0 es mi ID del tr pero me salen todos los tds de la tabla… raro no?

        Julio Avellaneda respondido:
        12/27/2011 en 11:46

        no, no es raro, pq con esa funcion estas recorriendo todos los td de tu fila (tr)

        magga escribió:
        12/27/2011 en 11:47

        gracias Julio! solucione mi problema por error le estaba dando el mismo id a varios tr x eso me salian varios td’s jejeje😉 GRACIAS!!

    Josue escribió:
    01/30/2012 en 12:03

    Excelente post, pero tengo una duda, en que parte del código debería ir la linea $.ajax pero para enviar todas las lineas en una sola llamada al servidor

      Julio Avellaneda respondido:
      01/30/2012 en 15:19

      Hola, deberia ir luego de la línea 20, mira:
      $(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);
      })
      //ACA $.ajax
      })
      })

        juanchiy2k escribió:
        05/20/2012 en 15:17

        Excelente post Julio!!!, como Josue yo también uso Ajax para enviar al servidor, ¿cómo hago para enviar el valor de cada celda a una matriz?

        Saludos

        repdilieventos escribió:
        08/09/2016 en 15:34

        si se cocola el AJax en esa linea solo va a tomar el ultimo valor la idea es q si tiene varios registros como los pasas por ajax para guardar en base de datos

    Jquery Each | TagHall escribió:
    03/13/2012 en 18:05

    […] "jqmodal", embeddedHeight: "400", embeddedWidth: "425", themeCSS: "" }); . Recorriendo un tabla con jQuery [.each] « Todo en Visual Basic.Net . jQuery « Todo en Visual […]

    lazaro alvarez escribió:
    04/20/2012 en 03:25

    Hola, muy bueno el articulo, el caso es que yo tengo una tabla creada con un solo tr dentro de un bucle, segun los datos que haya en la BD, y si hago lo que aqui se plantea, me selecciona tooodos los td de la tabla y no los de la ultima columna, me gustaria saber como puedo hacerlo.Gracias de antemano.
    El codigo de mi tabla es el sgte:

    <%–
    Dependiente nº
    –%>

    Nombre

    Teléfono

    Dirección

    <%–
    CoordLatitud

    CoordLongitud
    –%>

    Móvil

    Seguro médico

    Fecha de nacimiento

    DNI

    Población

    Provincia

    Código postal

    Observaciones

    <%–

    –%>

    <%–

    –%>

      Julio Avellaneda respondido:
      05/31/2012 en 11:03

      Hola, si necesitas los de la ultia columna puedes usar un filtro, algo como: $(“td:last”) asi le dices q quieres la ultima columna…

      Cualquier cosa cuentame

    juan carlos escribió:
    05/13/2012 en 10:50

    en la parte donde mandas los alert ,, como le haria para guardar los datos en una db , mysql ,,usando php,, me gustraria el codigo porfa ,, gracias

      Julio Avellaneda respondido:
      05/14/2012 en 12:59

      hola, no conozco php ya que trabajo es ASP.NET, pero puedes hacerlo usando una llamada al servidor con $.ajax, en acada ciclo lo harias enviandolos valores de cada fial, y ya en tu servidor implementarias la logica necesaria.

      Saludos

    Monica escribió:
    06/07/2012 en 12:08

    Felicitaciones! qué buen post!! Tengo una duda, como puedo obtener el valor de un caja de texto que está dentro de una celda?. La caja de texto está dentro de un template field:

    <asp:TextBox ID="txtPrecio" runat="server"

      Julio Avellaneda respondido:
      06/07/2012 en 12:17

      Gracias Monica, primero q todo no deberias hacerlo por el id, lo mejro es hacerlo por una clase, dale una clase a tu textbox,y luego cuando llamas el contenido de la celda le dices algo como :find(“.nombreclase”)

      Cuentame como te va

        Monica escribió:
        06/07/2012 en 12:42

        Hola Julio, ante todo muchas gracias por responder.
        Asigné una clase al textbox así:

        Luego, desde jquery, intento obtener su valor accediendo al contenido de la celda, de la siguiente forma: $(this).find(“.cat”).text()

        pero no muestra nada… cuando quito el text(), me muestra [object object]
        ¿Qué me puede estar faltando?

    Monica escribió:
    06/07/2012 en 12:33

    Felicitaciones! qué buen post!! Tengo una duda, como puedo obtener el valor de un caja de texto que está dentro de una celda, en un template field?

      Julio Avellaneda respondido:
      06/07/2012 en 12:41

      Hola, te respondi antes, pero seria algo asi:
      campo1 = $(this).text(); -> original
      campo1 = $(this).find(‘.clasetextbox’).val() -> pruebalo asi, donde clasetextbox es el nombre de la clase q le diste a ese campo de texto

        Monica escribió:
        06/07/2012 en 12:44

        muchas gracias Julio!! funciono!!! sii vi tu respuesta anterior, lo estaba haciendo con text(), pero ahora probé usando val(), y funcionó muy bien.
        Muchas muchas gracias por tu ayuda!!

        Julio Avellaneda respondido:
        06/07/2012 en 12:45

        Q bueno Monica… es un gusto!

        Saludos!

        Monica escribió:
        06/07/2012 en 16:50

        Hola Julio! Te escribo nuevamente. Ahora quisiera obtener el valor de si está marcado un checkbox, que también se encuentra en un template field. Al checkbox le asigné una clase, y luego intenté obtener su valor accediendo al contenido de la celda de la siguiente forma, pero no funciona. Qué me puede estar faltando?: $(this).find(“.chkSel”).attr(“checked”)

        Julio Avellaneda respondido:
        06/07/2012 en 16:53

        Hola Monica, intenta asi:
        $(this).find(“.chkSel”).is(“:checked”) si esta chequeado te retornara true de lo contrario false

        Saludos

        Monica escribió:
        06/07/2012 en 16:57

        Hola Julio, gracias por tu pronta respuesta.
        También lo intenté, pero me retorna false a pesar de que esté marcado el check…

        Julio Avellaneda respondido:
        06/08/2012 en 00:30

        y si intentras con algo asi:
        $(this).find(“:checkbox .chkSel”)is(“:checked”)

        Monica escribió:
        06/08/2012 en 08:28

        Hola Julio. Lo intenté, pero sigue teniendo el mismo resultado: me retorna false a pesar de que estén marcados los check…

        Julio Avellaneda respondido:
        06/08/2012 en 09:08

        Hola Monica.. dejame y en un rato te respondo, lo revisare de nuevo

        Monica escribió:
        06/08/2012 en 10:54

        Hola Julio. Muchas gracias por toda tu ayuda. Te cuento que investigué un poco, y encontré cómo lograrlo. Por si alguna persona también tuviera este problema, funcionó de esta forma: $(this).find(“.chkSel input:checkbox”).is(“:checked”);

        Julio Avellaneda respondido:
        06/08/2012 en 10:57

        Que bueno Monica, gracias por compartir la solución..

        Saludos

    Felipe Eduardo escribió:
    11/29/2012 en 16:01

    Hola gracias por el aporte muy buen articulo pero tengo una consulta en caso tuviera por cada fila 3 radios y quisiera saber al recorrer la tabla cual ah sido escogido como seria ?

    Gracias de antemano

      Julio Avellaneda respondido:
      12/30/2012 en 11:27

      Hola Felipe, primero que todo perdón por no responderte antes, en ese caso deberías acceder al elemento que se encuentre en cada celda, algo así: campo1 = $(“:radio”, this) y estarías obteniedo la referencia al control radio de la celda actual, cualquier cosa cuéntame.

      Saludos

    Domingo Sanchez escribió:
    01/14/2013 en 07:46

    Hola es muy bueno la verdad para una persona que no sepa jquery es estupendo tu aporte te felicito, tengo una pregunta yo tengo una tabla que se llena dinamicamente y quiero que cuando de click sobre un los valores de los pasen a unas variables para ser editados como lo hago.

    Domingo Sanchez escribió:
    01/14/2013 en 07:49

    Hola es muy bueno la verdad para una persona que no sepa jquery es estupendo tu aporte te felicito, tengo una pregunta yo tengo una tabla que se llena dinamicamente y quiero que cuando de click sobre una de las filas los valores de las columnas pasen a unas variables para ser editados como lo hago.

      Julio Avellaneda respondido:
      01/15/2013 en 01:52

      Hola, primero gracias por tu comentario, una opción a lo que planteas es crear un objeto e ir asignándoles los valores a medida que vas leyendo los datos de la celdas, en decir, en el caso campo1 = $(this).text(); allí asignarías los valores a tu objeto, y así con las demás celdas, luego ya con tu objeto puedes hacer un binding con un formulario y allí trabajarlos.

      Cualquier cosa me cuentas, saludos!

    Domingo Sanchez escribió:
    01/14/2013 en 09:39

    Excusame, pero tengo una duda con respecto al caso que te comente anteriormente, he notado que cuando lleno la tabla dinamicamente el evento click del $(‘#myTabla tbody tr’).Click solo funciona en la filas que he definido directamente en la tabla, no en las que he agregado dinamicamente. a que se debe que solo funciona con las filas agregadas directamente? estoy trabajando con ASP.NET MVC 3.

    Gracias de antemano.

    Domingo Sanchez escribió:
    01/15/2013 en 08:19

    Buenos Dias Tengo una pregunta, estoy utilizando ASP.NET MVC 3 y tengo una funcion que me carga todos los productos y agrega dinamicamente las filas a una tabla, que me esta sucediendo que despues que he cargado la tabla y modifico un parta de sustados y lo grabo, cuando refresco la data me carga la misma data que me cargo la primera ves, aunque los datos esten en la base de datos actualizados.

    esta es la forma que lo estoy haciendo, corrijanme si tengo algo mal.

    Modelo

    [Serializable]
    public class Item
    {
    public int Code { get; set; }
    public string Name { get; set; }
    public int Category { get; set; }
    public decimal Cost { get; set; }
    public decimal Price { get; set; }
    }

    Controler

    [HttpGet]
    public ActionResult getallproduct()
    {
    var qProds = (from itms in db.Products select itms).ToList();
    return Json(qProds, JsonRequestBehavior.AllowGet);
    }

    funcion en Javascrit que carga los datos, este medo hasta el momento solo se esta ejecutando una sola vez.

    function getAllProducts() {
    $(‘#tproducts’).find(“tr:not(:first)”).remove();
    $.getJSON(“/Home/getallproduct”, null, function (data) {
    $.each(data, function (i, data) {
    $(“#tproducts > tbody:last”).append(“” + data.Pr_Code + “” + data.Pr_Name + “” + data.Pr_Category + “” + data.Pr_Cost + “” + data.Pr_Price + “”);
    });
    });
    }

    Gracias anticipadas por su ayuda.

    Dios les bendiga en gran manera.

    Domingo Sanchez escribió:
    01/18/2013 en 12:54

    Buenas Tardes,

    por lo menos aqui en Rep. Dominicana es de tarde, tengo una pregunta, publique un proyecto en un Servidor Windows 2008 R2 y IIS 7.5, el proyecto esta hecho en ASP.NET MVC 3, la pagina corre bien pero no me ejecuta los script de javascrit, no se si me falta algo por configurar.

    Muchas Gracias por su pronta ayuda.

      Domingo Sanchez escribió:
      01/18/2013 en 12:55

      Tambien estoy utilizando GETJSON para hacer peticiones asincronas en el servidor.

        Julio Avellaneda respondido:
        01/19/2013 en 22:55

        Hola amigo, bueno, lo primero es q verifiques si realmente tu js se ejecuta, podrías usar firebug para hacer esa validación

    Jose escribió:
    04/24/2013 en 11:24

    un favor necesito sumar una columna de un reporte que es puro html trabajo con asp.net y mvc3 en mi reporte jala automaticamente y suma los subtotales de las filas pero yo quiero sumar esos subtotales de la comlumna y colocarlo en el foot de mi tabla echa en html ni idea como hacer eso espero tu ayuda

    miguel angel escribió:
    07/26/2013 en 12:11

    Hola Julito una consulta en tu ejemplo de recorrer una tabla con each(que me ayudo bastente en mi proyecto), quisiera saber como puedo hacer para asignarles valores a los input que estan dentro de la tabla:

    esta es la forma de guardar el valor de un input en una variable
    campo1 = $(this).find(‘.clasetextbox’).val()

    pero lo que yo deseo es como hacer lo contrario
    cargar un valor en ese textbox????

    gracias anticipadamente por la ayuda😉

      Julio Avellaneda respondido:
      07/26/2013 en 14:11

      Hola Miguel, para setear el valor prueba con $(this).find(‘.clasetextbox’).val(‘ACAELVALOR’)

      Saludos!

    dulce maría escribió:
    01/25/2014 en 12:58

    Hola buenos días, antes que nada agradezco el aporte, pero tengo una duda. Si yo tengo un datagrid el cual se llena através de una consulta, ¿cómo puedo obtener el valor de toda la fila al darle clic en una celda especial de editar? Dicha información la quiero mostrar en un formulario.
    He intentado varias maneras y no he podido. Si me explicas un poco te agradezco. Saludos!

      Julio Avellaneda respondido:
      01/27/2014 en 11:01

      Hola María, gracias por tu comentario, bueno básicamente el código jQuery sería algo así:
      $(“#GridView1 td”).on(“click”, function () {
      $(this).parent().children(“td”).each(function() {
      console.log($(this).text());
      });
      });

      Te dejo un ejemplo para que lo revises, cualquier me cuentas Link Ejemplo!

    Fernando Gutiérrez escribió:
    02/03/2014 en 16:05

    hola julio muy buenos ejemplos, estoy atorado en un proyecto de la universidad utilizando jquery y javascript,
    Te cuento, estoy tomando un archivo formato CSV y lo guardo en una tabla, pero quisiera tomar los valores por filas, para luego graficarlos, el código empieza así:
    $(function() {
    $.get(‘PHY_Short_PG.csv’, function(data) {
    $(‘#CSVSource’).html(‘

    ' + data + '

    ‘);

    });
    $(‘#Tablita’).CSVToTable(‘PHY_Short_PG.csv’, { loadingImage: ‘images/loading.gif’, startLine: 0 });

    });
    ¿Que ideas me puedes dar? de antemano muchas gracias.

    Julio Avellaneda respondido:
    02/04/2014 en 08:58

    Fernando hola, bueno pero exactamente en que parte estas atorado, porque si quieres graficar una tabla sin tener que leer línea a línea mira: http://julitogtu.com/2011/09/09/jquery-graficando-un-gridview-con-jquery/

    Saludos.

    Damian Manzo escribió:
    04/10/2014 en 10:55

    Que tal buen dia, muchas gracias por el aporte, me sirvio mucho, tengo una pregunta, hay forma de editar un td de la tabla que estoy recorriendo??

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s