jQuery selectores para filas pares/impares en una tabla

El código en el primer bloque de código es el código fuente. Después de que el código fuente se está ejecutando. El código será cambiado (Ver el 2do Bloque de Código).jQuery selectores para filas pares/impares en una tabla

Quiero que la clase (es decir, 'par' e 'impar') de la etiqueta solo se muestre en la 'tabla1'. Sin embargo, actualmente una tabla de anidación (es decir, 'tabla2') también tiene clases 'par' e 'impar' de cada etiqueta.

¿Alguien puede ayudarme? Gracias por adelantado.

----------- En primer bloque de código --------------

<head> 
<script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#table1 tr:odd").addClass("odd"); 
       $("#table1 tr:not(.odd)").addClass("even"); 
      }); 
</script> 
</head> 

<body> 

<table id="table1"> 
    <tr> 
     <td>AAA</td> 
     <td>CCC</td> 
    </tr> 
    <tr> 
     <td>BBB</td> 
     <td>DDD</td> 
    </tr> 
    <tr> 
     <td> 
      <table id="table2"> 
        <tr></tr> 
        <tr></tr> 
      <table> 
     </td> 
    </tr> 

</table> 
</body>

-------- --- segundo bloque de código ---------------

<table id="table1"> 
    <tr class="even"> 
     <td>AAA</td> 
     <td>CCC</td> 
    </tr> 
    <tr class="odd"> 
     <td>BBB</td> 
     <td>DDD</td> 
    </tr> 
    <tr class="even"> 
     <td> 
      <table id="table2"> 
        <tr class="even"></tr> 
        <tr class="odd"></tr> 
      <table> 
     </td> 
    </tr> 

</table>

Fuente

2011-07-12 Acubi

Usted debe darle a su pregunta un título más significativo. –

Todas publicado la respuesta son casi justo ..

$(document).ready(function(){ 
    $("#table1 > tbody > tr:odd").addClass("odd"); 
    $("#table1 > tbody > tr:not(.odd)").addClass("even"); 
});

Muchos navegadores añaden automáticamente un tbody a su mesa, incluso si no añadir una tú mismo. Por lo tanto, #table1 > tr no coincidirá porque tr no es un hijo directo de table. Su mejor opción es utilizar lo anterior y agregar explícitamente un tbody para aquellos navegadores que no lo hacen por usted.

<table id="table1"> 
     <tbody> 
     <tr class="even"> 
      <td>AAA</td> 
      <td>CCC</td> 
     </tr> 
     <tr class="odd"> 
      <td>BBB</td> 
      <td>DDD</td> 
     </tr> 
     <tr class="even"> 
      <td> 
       <table id="table2"> 
        <tbody> 
         <tr class="even"></tr> 
         <tr class="odd"></tr> 
        </tbody> 
       <table> 
      </td> 
     </tr> 
     <tbody> 

</table>

http://jsfiddle.net/5ETAD/1/

Fuente

2011-07-12 14:44:54

debería ser:

$("#table1>tr:odd").addClass("odd"); 
$("#table1>tr:not(.odd)").addClass("even");

Fuente

2011-07-12 14:34:49

Esto no funcionará: http://jsfiddle.net/5ETAD/2/ probado en Chrome e IE8 y no coincide con nada. Los navegadores incorporan internamente un 'tbody'. –

podría utilizar el siguiente (observe el signo más grande que):

 $(document).ready(function(){ 
      $("#table1 > tr:odd").addClass("odd"); 
      $("#table1 > tr:not(.odd)").addClass("even"); 
     });

Esto seleccionará solo los niños inmediatos tr's.

Fuente

2011-07-12 14:34:56

-1

Utilice el selector direct child.

También se puede usar: incluso en lugar de: no (.odd)

$(document).ready(function(){     
    $("#table1 > tr:odd").addClass("odd");     
    $("#table1 > tr:even").addClass("even");    
});

Fuente

2011-07-12 14:35:06 Chandu

-1

  $("#table1 > tr:odd").addClass("odd"); 
      $("#table1 > tr:not(.odd)").addClass("even");

Fuente

2011-07-12 14:35:19 Neal

-1

Sólo tiene que utilizar selectores CSS adecuadas. Proveedores:

$("#table1>tr:odd").addClass("odd");

Fuente

2011-07-12 14:35:50

Para evitar recorrido DOM redundante, podría utilizar algo como esto:

$('#table1 > tbody') 
.filter('tr:odd').addClass('odd') 
.end() //break chain and return to the original tbody element 
.filter('tr:even').addClass('even')

Fuente

2013-07-08 08:01:15

jQuery selectores para filas pares/impares en una tabla

Respuesta

Cuestiones relacionadas