jQuery: Hervorhebung gerade Spalten (nicht Zeilen)

Question

Wie kolorieren gerade (oder ungerade) Tabellenspalten mit jQuery? (ohne Klassen manuell hinzufügen)

Mein Markup ist:

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

(es kann oder auch nicht Umfang attribs oder th Tags enthalten)

Answer 1

Sie die :nth-child() selector dafür verwenden können:

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

You can see a demo here, diese Version führt die Spalten, unabhängig davon, ob die Zelle eineist 0 oder <td> können Sie das dort hinzufügen (z.B. td:nth-child(2n)) wenn Sie nur das eine oder andere tun wollen. Wenn Sie die anderen Spalten auswählen möchten, tun Sie einfach 2n+1 stattdessen.

Answer 2

Bearbeiten: Aktualisiert, um meine Missdeutung der Frage zu beheben.

sollte diese Arbeit:

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

oder

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