ANP ANP - 4 months ago 89
Javascript Question

jQuery each loop in table row


Possible Duplicate:

How to iterate a table rows with JQuery and access some cell values?




I am having something like:

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


I have written jQuery to loop through each tr like:

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


But problem is that it loops through the "tr" of "tblTwo" also which I don't want.
Can anyone please suggest something to solve this?

Answer

in jQuery just use

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

using > selector you will walk through immediate descendents (and not all descendents)


in VanillaJS you can use document.querySelectorAll() and walk over the rows using forEach()

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