Geek asks and answers

Select only tr in the main table, not nested tables

This question has been asked before, see jQuery select only tr / td in the main table, not nested tables. however, this did not help me.

      $("#tablePartners tr:odd").addClass("odd");
      $("#tablePartners tr:even").hide();
      $("#tablePartners tr:first-child").show();

      $("#tablePartners tr.odd").click(function(){
          $(this).next("tr").toggle();
          $(this).find(".arrow").toggleClass("up");
      });

This code works fine for switching a row to a table, however it breaks when I have nested tables in a table:

<table id="tablePartners">
    <thead>
        <tr>

            <th>Name</th>
            <th>Description</th>
            <th>Address</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><a href="#">Partner Name</a></td>
        <td>Random description</td>
        <td>1 Random Street</td>
        <td><div class="arrow"></div></td>
    </tr>
       <tr>
            <td colspan="4">
               <table>
                    <tr>
                        <td><b>Phone</b></td>
                        <td>0123456789</td>
                    </tr>
                    <tr>
                        <td><b>Contact Name</b></td>
                        <td>Jamie</td>
                    </tr>
               </table>

            </td>
        </tr>
    </tbody>
</table>

I tried to do this to apply events only to parent and non-nested tables (as suggested in another question), but this did not work:

  $("#tablePartners>tbody>tr:odd").addClass("odd");
  $("#tablePartners>tbody>tr:even").hide();
  $("#tablePartners>tbody>tr:first-child").show();

  $("#tablePartners>tbody>tr.odd").click(function(){
      $(this).next("tr").toggle();
      $(this).find(".arrow").toggleClass("up");
  });

EDIT: Not working, I mean: the switching event is not working, and the odd lines are not hidden. In the first javascript, the switch worked, and the odd lines were hidden, and the nest table with the odd lines was also hidden, and I don't want this.

, , .

jsfiddle: http://jsfiddle.net/9eJ8y/2/

+3
1

, . tbody , .. . odd even, :

$("#tablePartners > tbody > tr:even").addClass("even");
$("#tablePartners > tbody > tr:odd").hide();
$("#tablePartners > tbody > tr:first-child").show();

$("#tablePartners > tbody > tr.even").click(function(){
  $(this).next("tr").toggle();
  $(this).find(".arrow").toggleClass("up");
});

DEMO

+3

More articles:


All Articles