jQuery: mettre en surbrillance des colonnes paires (pas des lignes)

Question

Comment coloriser des colonnes de table paires (ou impaires) en utilisant jQuery? (sans ajout de classes manuellement)

Mon balisage est:

<table> 
    <caption>Table caption</caption> 
    <thead> 
    <tr><th scope="col">Table header 1</th><th scope="col">Table header 2</th><th scope="col">Table header 3</th><th scope="col">Table header 3</th></tr> 
    </thead> 
    <tbody> 

     <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr> 
     <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr> 
     <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr> 

     <tr><th scope="row">Table row header</th><td>Table data</td><td>Table data</td><td>Table data</td></tr> 
    </tbody> 
</table> 

(il peut ou ne peut pas contenir attribs scope ou th tags)

Answer 1

Vous pouvez utiliser le :nth-child() selector pour cela:

$('table tr :nth-child(2n)').css('background-color', '#eee'); 

You can see a demo here, cette version fait les colonnes, peu importe si la cellule est <th> ou <td> vous pouvez ajouter cela là (par ex. td:nth-child(2n)) si vous voulez faire seulement l'un ou l'autre. Si vous souhaitez sélectionner les colonnes autres, faites simplement 2n+1 à la place.

Answer 2

Modifier: Mis à jour pour corriger mon erreur de lecture de la question.

Cela devrait fonctionner:

$('tr > :nth-child(even)').css('background-color','#eee'); 

ou

$('tr > :nth-child(odd)').css('background-color','#eee');