Lặp qua từng cột trong bảng HTML và nhận dữ liệu bằng cách sử dụng jQuery

Question

Tôi đang cố gắng lấy dữ liệu bên trong html <tbody>. Về cơ bản, tôi có nhiều hàng như thế này;

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

Bây giờ, tôi đang Looping qua và cố gắng để có được các giá trị <td> như thế này;

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

Nhưng, tôi không thể nhận được các giá trị (văn bản html) của mỗi hàng. Tôi muốn gán các giá trị này cho các biến cục bộ.
Ngoài ra, tôi không muốn để có được những innerHTML một nút (đó là trong mỗi hàng)

Answer 1

Sử dụng một lồng nhau .each() có nghĩa là vòng lặp bên trong của bạn đang làm một td tại một thời điểm, vì vậy bạn không thể thiết lập productId và product và quantity tất cả trong vòng lặp bên trong .

Cũng sử dụng function(key, val) và sau đó val[key].innerHTML là không đúng: các .each() method vượt qua chỉ số (số nguyên) và các yếu tố thực tế, vì vậy bạn muốn sử dụng và sau đó function(i, element)element.innerHTML. Mặc dù jQuery cũng đặt this thành phần tử, vì vậy bạn chỉ có thể nói this.innerHTML.

Dù sao, đây là một cách để có được nó để làm việc:

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

Bạn có thể thử với textContent.

var productId = val[key].textContent; 

Answer 3

thử này

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

bài đầu tiên của tôi ...

Tôi cố gắng này: thay đổi 'tr' cho 'td 'và bạn sẽ nhận tất cả HTMLRowElements thành một mảng và việc sử dụng textContent sẽ thay đổi từ Object thành 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); 
} 

Answer 5

Khi bạn tạo bảng của bạn, đặt td của bạn với 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