各HTMLテーブルの列をループし、jQueryを使用してデータを取得

Question

私はhtmlの<tbody>の中のデータを取得しようとしています。基本的に、私はこのような多くの行を持っています。

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

さて、私はをループして、このような<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 = ? 
      }); 
     }); 

しかし、私は各行の値（HTMLテキスト）を取得できません。 これらの値をローカル変数に割り当てたいと思います。
また、私はあなたのTextContentで試すことができます（それぞれの行にある）ボタン

Answer 1

を試してみてください、あなたの内側のループは、一度に1つのTDをやっていることを意味し、あなたはすべての内部ループでproductIdとproductとquantityを設定することはできません。

も function(key, val)を使用して、 val[key].innerHTMLは適切ではない：あなたは function(i, element)、その後 element.innerHTMLを使用したいので .each() methodは、インデックス（整数）と実際の要素を渡します。 jQueryでも要素に thisが設定されているので、 this.innerHTMLと言うことができます。

とにかく、ここではそれが動作するように取得する方法です：

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

デモ：http://jsfiddle.net/bqX7Q/

Answer 2

のinnerHTMLを取得する必要はありません。

var productId = val[key].textContent; 

Answer 3

ネストされた.each()を使用して、この

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

私の最初のポスト...

私はこの試みた：TD」の変更 'TR' をすべてのHTMLRowElementsを配列に取得し、textContentを使用してObjectから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

あなたがテーブルを作成するとき

、クラス= "須磨"

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