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不会，即您减少一行。您可以切换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

在主表中只选择tr，而不是嵌套表

1 个答案: