Przeprowadź pętlę przez każdą kolumnę tabeli HTML i pobierz dane za pomocą jQuery

Question

Próbuję pobrać dane do html <tbody>. Zasadniczo, mam wiele takich wierszy;

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

Teraz jestem przelotowego i próbuje uzyskać wartości jak ten <td>;

 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 = ? 
      }); 
     }); 

Ale nie jestem w stanie uzyskać wartości (tekst html) każdego wiersza. Chcę przypisać te wartości do zmiennych lokalnych.
Ponadto, nie chcę, aby uzyskać innerHTML jednego przycisku (który jest w każdym rzędzie)

Answer 1

Korzystanie zagnieżdżony .each() oznacza, że ​​wewnętrzna pętla robi jeden td na raz, więc nie można ustawić productId i product i quantity wszystko w pętli wewnętrznej .

używając także function(key, val) a następnie val[key].innerHTML nie ma rację: .each() method przechodzi indeks (całkowita) i rzeczywistego elementu, więc byłoby użyć function(i, element) a następnie element.innerHTML. Mimo że jQuery ustawia również element this, można po prostu powiedzieć: this.innerHTML.

Zresztą oto sposób zmusić go do pracy:

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/

Answer 2

Można spróbować z textContent.

var productId = val[key].textContent; 

Answer 3

spróbować

$("#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()) 
    }); 

Answer 4

mój pierwszy post ...

Próbowałem to: zmiana '' dla „tr td ", a wszystkie elementy HTMLRowElements zostaną przekształcone w tablicę, a użycie właściwości textContent zmieni się z obiektu na ciąg znaków:

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); 
} 

Answer 5

Podczas tworzenia tabeli, umieścić td 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