jQuery: làm nổi bật cả các cột (không phải hàng)

Question

Làm thế nào để tô màu các cột bảng (hoặc lẻ) bằng cách sử dụng jQuery? (mà không cần thêm các lớp học bằng tay)

đánh dấu của tôi là:

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

(nó có thể có hoặc không chứa attribs phạm vi hoặc th tags)

Answer 1

Bạn có thể sử dụng :nth-child() selector cho việc này:

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

You can see a demo here, phiên bản này thực hiện các cột, bất kể ô đó là <th> hoặc <td> bạn có thể thêm vào đó (ví dụ: td:nth-child(2n)) nếu bạn muốn làm chỉ một hoặc khác. Nếu bạn muốn chọn các cột khác, chỉ cần thực hiện 2n+1 thay thế.

Answer 2

Chỉnh sửa: Cập nhật để khắc phục sự hiểu lầm của tôi về câu hỏi.

này nên làm việc:

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

hoặc

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