web-dev-qa-db-ja.com

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

html <tbody>内のデータを取得しようとしています。基本的に、このような行がたくさんあります。 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>

今、私はループしてこのような<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テキスト）を取得することはできません。 これらの値をローカル変数に割り当てたい
また、ボタンのinnerHTML（各行にある）を取得したくない

jqueryhtmlloopsforeach
32
DotNet Dreamer

ネストされた.each()を使用すると、内部ループが一度に1 tdを実行するため、productIdおよびproductおよびquantityをすべて内部ループに設定できません。 。

また、function(key, val)を使用してからval[key].innerHTMLを使用するのは適切ではありません。 .each() method は、インデックス（整数）と実際の要素を渡すので、 function(i, element)、次にelement.innerHTML。 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/

68
nnnnnn

これを試して

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

私の最初の投稿...

私はこれを試してみました： 'tr'を 'td'に変更すると、すべての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);
}
3
Jurgen

テーブルを作成するとき、class = "suma"でtdを配置します

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

例：完了

1
Dave Rincon

TextContentで試すことができます。

var productId = val[key].textContent;
0
Zero Fiber