私は次のようなものを持っています:
<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」をループすることです。これも望ましくありません。誰もこれを解決するために何かを提案できますか?
jQueryではただ使用する
$('#tblOne > tbody > tr').each(function() {...code...});
直接の子セレクター(>
)を使用すると、直接の子孫(all子孫ではなく)
VanillaJSでは、document.querySelectorAll()
を使用して、forEach()
を使用して行をウォークできます。
[].forEach.call(document.querySelectorAll('#tblOne > tbody > tr'), function(tr) {
/* console.log(tr); */
});
ただの推奨事項:
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
}
}