jQuery selecciona solo tr/td en la tabla principal, no en las tablas anidadas.

Question

Actualmente tengo una tabla con una tabla anidada en ella:

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

etc estructura de la tabla.

Actualmente estoy usando el siguiente jQuery, que se activa en cada tr independientemente del nivel de la tabla. ¿Cómo lo cambio para disparar solo en el primer nivel?

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

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

Answer 1

Uso del child selector > seleccionar solamente aquellos tr elementos que son un niño de la informe la mesa de tbody, por ejemplo:

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

Answer 2

¿Quieres

$("#report>tr") 

El > significa descendiente directo (hijo), más que cualquier descendiente.

Answer 3

utiliza el selector de > empleando solamente el descendiente directo de un elemento. Usted tiene que apuntar el elemento tbody implícita dentro de la tabla también:

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

Answer 4

con esta solución, no importa si usted tiene una etiqueta tbody en el medio:

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