Loop Through Each HTML Table Column and Get the Data using jQuery

Question

i'm trying to get the data inside the html <tbody>. Basically, i have many rows like this; enter image description here

                <tbody>
                    <tr>
                        <td>63</td>
                        <td>Computer</td>
                        <td>3434</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="mprDetailRemove"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>64</td>
                        <td>Stationary</td>
                        <td>111</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="Button1"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>64</td>
                        <td>Stationary</td>
                        <td>11</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="Button2"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                </tbody>

Now, i'm looping through and trying to get the <td> values like this;

        var table = $("#mprDetailDataTable table tbody");

        table.find('tr').each(function (key, val) {
            $(this).find('td').each(function (key, val) {
                var productId = val[key].innerHTML; // this isn't working
                var product = ?
                var Quantity = ?
            });
        });

But, i'm not able to get the values(html text) of the each row. I want to assign these values to local variables.
Also, i don't want to get the innerHTML of a button (which is in each row)

nnnnnn · Accepted Answer · 2013-06-15 06:05:15Z

85

Using a nested .each() means that your inner loop is doing one td at a time, so you can't set the productId and product and quantity all in the inner loop.

Also using function(key, val) and then val[key].innerHTML isn't right: the .each() method passes the index (an integer) and the actual element, so you'd use function(i, element) and then element.innerHTML. Though jQuery also sets this to the element, so you can just say this.innerHTML.

Anyway, here's a way to get it to work:

    table.find('tr').each(function (i, el) {
        var $tds = $(this).find('td'),
            productId = $tds.eq(0).text(),
            product = $tds.eq(1).text(),
            Quantity = $tds.eq(2).text();
        // do something with productId, product, Quantity
    });

Demo: http://jsfiddle.net/bqX7Q/

answered Jun 15, 2013 at 6:05

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kershaw Over a year ago

I had a similar need, and made this jsfiddle based on this answer: jsfiddle.net/kershaw/o3bh6kxc/30

sangram parmar · Accepted Answer · 2013-06-15 05:57:40Z

14

try this

    $("#mprDetailDataTable tr:gt(0)").each(function () {
        var this_row = $(this);
        var productId = $.trim(this_row.find('td:eq(0)').html());//td:eq(0) means first td of this row
        var product = $.trim(this_row.find('td:eq(1)').html())
        var Quantity = $.trim(this_row.find('td:eq(2)').html())
    });

answered Jun 15, 2013 at 5:57

sangram parmar

8,7862 gold badges26 silver badges48 bronze badges

1 Comment

Asqan Over a year ago

does it work only with html() function? i try to use other functions on the records such as val() and attr() but nothing works. what is the problem precisely?

Jurgen · Accepted Answer · 2014-02-08 19:39:21Z

4

My first post...

I tried this: change 'tr' for 'td' and you will get all HTMLRowElements into an Array, and using textContent will change from Object into String

var dataArray = [];
var data = table.find('td'); //Get All HTML td elements

// Save important data into new Array
for (var i = 0; i <= data.size() - 1; i = i + 4)
{
  dataArray.push(data[i].textContent, data[i + 1].textContent, data[i + 2].textContent);
}

answered Feb 8, 2014 at 19:39

Jurgen

411 bronze badge

Comments

Dave Rincon · Accepted Answer · 2017-09-21 01:47:47Z

1

When you create your table, put your td with class = "suma"

$(function(){   

   //funcion suma todo

   var sum = 0;
   $('.suma').each(function(x,y){
       sum += parseInt($(this).text());                                   
   })           
   $('#lblTotal').text(sum);   

   // funcion suma por check                                           

    $( "input:checkbox").change(function(){
    if($(this).is(':checked')){     
        $(this).parent().parent().find('td:last').addClass('suma2');
   }else{       
        $(this).parent().parent().find('td:last').removeClass('suma2');
   }    
   suma2Total();                                                           
   })                                                      

   function suma2Total(){
      var sum2 = 0;
      $('.suma2').each(function(x,y){
        sum2 += parseInt($(this).text());       
      })
      $('#lblTotal2').text(sum2);                                              
   }                                                                      
});

Ejemplo completo

edited Sep 21, 2017 at 1:47

answered Oct 8, 2014 at 15:31

Dave Rincon

3783 silver badges12 bronze badges

1 Comment

AHiggins Over a year ago

To keep the site clean, try to avoid shorthand like 'ur' instead of 'your, 'u', instead of 'you', etc. :) Thanks!

Zero Fiber · Accepted Answer · 2013-06-15 05:53:34Z

0

You can try with textContent.

var productId = val[key].textContent;

answered Jun 15, 2013 at 5:53

Zero Fiber

4,4752 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Loop Through Each HTML Table Column and Get the Data using jQuery

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related