42

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)

0

5 Answers 5

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/

1
13

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())
    });
1
  • 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?
    – Asqan
    Jan 29, 2015 at 4:52
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);
}
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

1
  • 3
    To keep the site clean, try to avoid shorthand like 'ur' instead of 'your, 'u', instead of 'you', etc. :) Thanks!
    – AHiggins
    Oct 8, 2014 at 15:51
0

You can try with textContent.

var productId = val[key].textContent;
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.