jQuery select only tr/td in main table, not nested tables

Question

html code

<table class="fruits" border="1">
<tr>
    <td>Apple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Apple</td>
</tr>
<tr>
    <td>Pineapple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Pineapple</td>
</tr>
<tr>
    <td>Watermelon</td>
    <td>$3.20</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Watermelon</td>
</tr>
<tr>
    <td>Orange</td>
    <td>$1.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Orange</td>
</tr>

jQuery

var table = $("table");
table.find('tr').each(function (i) {
    var $tds = $(this).find('td'),

    fruit = $tds.eq(0).text(),
    buy = $tds.eq(3).text()         

    alert(fruit +" "+ buy);     
});

I want click the button and select on item in column 1 and 4, but that is another nest table, so coding in jQuery give me the wrong information. Anyone can help me jQuery in below?

Answer 1

The following approach is based of “positive thinking”: instead of excluding inner tables, we include just the outer table and the right elements:

$("table.fruits > tbody > tr")
.each(function (i) {
    var $tds = $(this).children('td'),
    fruit = $tds.eq(0).text(),
    buy = $tds.eq(3).text()         
    console.log(fruit +" "+ buy);     
});

If the table may contain thead elements, the code may need to be modified.

This simple version just selects all rows of the outer table (but not any row of any inner table) with the selector table.fruits > tbody > tr . In the DOM, tr elements do not appear as children of table but of tbody (or thead ), even if no <tbody> markup is used.

When processing a row, it is best to use the children() method, which selects just the direct descendants (children).

Answer 2

write class="f1" in all tr(you can check in html).working code is below.

<script>

    $(document).ready(function() {  
    var table = $("table.fruits"); 
    table.find('tr.f1').each(function (i) {  //this will find only tr which have class f1 not nested table . 
    var $tdsfirst = $(this).find('td:first');// find first td 
    var $tdslast = $(this).find('td:last');  //find last td
    fruit = $tdsfirst.text();
    buy = $tdslast.text();            

    alert(fruit +" "+ buy);     
}); 

  } ); 


   </script>  

<table class="fruits" border="1">
<tr class="f1">
    <td>Apple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Apple</td>
</tr> 
<tr class="f1"> 
    <td>Pineapple</td>
    <td>$2.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Pineapple</td>
</tr>
<tr class="f1">
    <td>Watermelon</td>
    <td>$3.20</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Watermelon</td>
</tr> 
<tr class="f1">
    <td>Orange</td>
    <td>$1.50</td>
    <td>
        <table>
            <tr><td>Nice</td></tr>
            <tr><td>Cheap</td></tr>
        </table>
    </td>
    <td>Buy Orange</td>
</tr>
</table> 

Answer 3

I have a solution for you that does not require adding classes to the HTML. It mostly relies on the not() selector.

JSFiddle: http://jsfiddle.net/kdNng/

$("table.fruits tr").not("table table tr").each(function ()
{
    var tds = $(this).children('td');

    var fruit = tds.eq(0).text();
    var buy = tds.eq(3).text();

    alert(fruit +" "+ buy);
});