jQuery seleziona solo tr/td nella tabella principale, non le tabelle nidificate.

Question

Al momento ho una tabella con una tabella nidificata in essa:

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

ecc struttura della tabella.

Attualmente sto usando il seguente jQuery, che si attiva su ogni tr indipendentemente dal livello della tabella. Come posso cambiarlo per sparare solo al primo livello?

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

Usare il child selector > di selezionare solo i tr elementi che sono un figlio del tavolo del tbodyrapporto, ad esempio:

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

Answer 2

Volete

$("#report>tr") 

Il > significa discendente diretto (figlio), piuttosto che qualsiasi discendente.

Answer 3

si utilizza il selettore > di indirizzare solo il diretto discendente di un elemento. È necessario indirizzare l'elemento tbody implicita all'interno della tabella anche:

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

Answer 4

con questa soluzione non importa se si dispone di un tag tbody tra:

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