web-dev-qa-db-ja.com

テーブル行の各ループをjQueryする

可能性のある複製：
JQueryを使用してテーブル行を反復処理し、いくつかのセル値にアクセスする方法

私は次のようなものを持っています：

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

次のように各trをループするjQueryを作成しました。

$('#tblOne tr').each(function() {...code...});

しかし、問題は、「tblTwo」の「tr」をループすることです。これも望ましくありません。誰もこれを解決するために何かを提案できますか？

javascriptjqueryhtml-tableeachtablerow
65
ANP

jQueryではただ使用する

$('#tblOne > tbody  > tr').each(function() {...code...});

直接の子セレクター（>）を使用すると、直接の子孫（all子孫ではなく）

VanillaJSでは、document.querySelectorAll()を使用して、forEach()を使用して行をウォークできます。

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(tr) {
    /* console.log(tr); */
});
183
fcalderan

ただの推奨事項：

DOMテーブルの実装を使用することをお勧めします。非常に簡単で使いやすいため、このタスクにjQueryは必要ありません。

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}
55
GNi33

イミディエートチャイルドセレクター>を使用します。

$('#tblOne > tbody  > tr')

説明：「親」で指定された要素の「子」で指定されたすべての直接の子要素を選択します。

18
Sarfraz