jquery - 仅选择主表中的 tr，而不选择嵌套表

Question

这个问题之前已经被问过，请参阅:jQuery select only tr/td in main table, not nested tables. ，但它对我来说并不能作为解决方案。

      $("#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");
      });

该代码可以很好地切换表格上的行，但是，当我在表格中嵌套表格时，它会中断:

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

我尝试这样做以仅将事件应用于父表而不是嵌套表(如其他问题线程中的建议)，但它不起作用:

  $("#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");
  });

编辑:通过不起作用，我的意思是:切换事件不起作用并且奇数行没有隐藏。在第一个 JavaScript 中，切换有效，奇数行被隐藏，但嵌套表奇数行也被隐藏，这是我不想要的。

我认为这一定是微不足道的，但我的视野狭隘。

我把它放在jsfiddle上:http://jsfiddle.net/9eJ8y/2/

Answer 1

问题是第一个代码还选择了标题行。使用 tbody 则不会，即您少了一行。您可以切换奇数和偶数来创建相同的效果:

$("#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