JQuery выбирает только tr/td в основной таблице, а не вложенные таблицы.

В настоящее время у меня есть таблица с вложенной таблицей:

   <table class="datagrid" id="report">
       <thead>
         <tr>
          <th>item1</th>
          <th>item2</th>
         </tr>
       </thead>
       <tbody>
       <tr class="odd"> <-- on click from this level only 
        <td></td>  
        <td></td>
       </tr>
       <tr>
        <td colspan="2">
         <table>
          <tr class="odd"> <-- not to be fired here
           <td></td> 

и т.д. структура таблицы.

В настоящее время я использую следующий jQuery, который запускается при каждом tr независимо от уровня таблицы. Как мне изменить его только на первом уровне?

 $(document).ready(function(){
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();

            $("#report tr.odd").click(function(){
                $(this).next("#report tr").fadeToggle(600);
            });
        });

Ответы

Ответ 1

Используйте дочерний селектор >, чтобы выбрать только те элементы tr, которые являются дочерними элементами таблиц отчетов tbody, для пример:

$("#report > tbody > tr.odd")

Ответ 2

с этим решением не имеет значения, есть ли у вас тег tbody между:

$('table').find('tr:first').parent().children()

Ответ 3

Вы используете селектор > для нацеливания только прямого потомка элемента. Вы также должны настроить таргетинг на неявный элемент tbody внутри таблицы:

$('#report>tbody>tr.odd')

Ответ 4

Вы хотите

$("#report>tr")

> означает прямой потомок (дочерний элемент), а не любой потомок.