jQuery each loop in table row [duplicate]
In jQuery just use:
$('#tblOne > tbody > tr').each(function() {...code...});
Using the children selector (>
) you will walk over all the children (and not all descendents), example with three rows:
$('table > tbody > tr').each(function(index, tr) { console.log(index); console.log(tr);});
Result:
0<tr>1 <tr>2<tr>
In VanillaJS you can use document.querySelectorAll()
and walk over the rows using forEach()
[].forEach.call(document.querySelectorAll('#tblOne > tbody > tr'), function(index, tr) { /* console.log(index); */ /* console.log(tr); */});
Just a recommendation:
I'd recommend using the DOM table implementation, it's very straight forward and easy to use, you really don't need jQuery for this task.
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 }}
Use immediate children selector >
:
$('#tblOne > tbody > tr')
Description: Selects all direct child elements specified by "child" of elements specified by "parent".