выберите только tr в основной таблице, а не во вложенных

Question

Этот вопрос уже задавался ранее, см .: jQuery выбирает только tr / td в основной таблице, а не во вложенных. однако это не помогло мне.

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