Chọn mỗi hàng bảng hiển thị thứ hai

Question

Tôi có bảng hiển thị cấu trúc cây (Siêu và Danh mục con). Khi người dùng nhấp vào một danh mục siêu dữ liệu, thuộc tính hiển thị của các con sẽ được chuyển thành.

Bây giờ tôi muốn thêm màu nền thay thế trên mỗi hàng của bảng thứ hai - nhưng tất nhiên chỉ lấy những màu trong tài khoản hiện đang hiển thị. Dưới đây là ví dụ đơn giản về cấu trúc:

<table> 
    <tr data-level="0"><td>Super 1</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 1</td></tr> 
    <tr data-level="0"><td>Super 2</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 2</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 3</td></tr> 
    <tr class="hide" data-level="1"><td>Sub 4</td></tr> 
</table> 

Khi người dùng nhấp vào phần tử "Super 2", lớp "ẩn" bị xóa khỏi phần tử con.

Tôi đã thử nhiều selectors, ví dụ .:

/* Ugly result (dosn't recognize that elements are hidden) */ 
tr:nth-child(2n) 
{ 
    background-color: grey; 
} 

/* Doesn't work at all */ 
tr:visible:nth-child(2n) 
{ 
    background-color: grey; 
} 

/* Not what I inteded to do */ 
tr:not(.hide):nth-child(2n) 
{ 
    background-color: grey; 
} 

Tôi hy vọng tôi đã rõ ràng về những gì tôi muốn làm.

Điều đó có thể thực hiện với CSS hay tôi nên viết tập lệnh JS để tính toán lại các hàng chẵn và lẻ bất cứ khi nào có thay đổi? Cảm ơn trước vì bất kỳ gợi ý nào!

Answer 1

đoạn jQuery này sẽ thực hiện công việc:

$('tr').removeClass('alternate')​ 
$('tr:not(.hide):odd').addClass('alternate')​ 

Chơi với nó trên jsFiddle

Answer 2

Bạn đã nói rằng lớp ẩn sẽ bị xóa khi nhấp.
Giữ đơn giản và thêm lớp IE: "hiển thị".

.show tr:nth-child(odd) { background-color:#eee; } 
.show tr:nth-child(even) { background-color:#fff; } 

Edit:
tôi sẽ đổ lỗi cho exaustion, nhưng tôi nghĩ rằng đây có thể là cú pháp chính xác.

tr.show:nth-child(odd) { background-color:#eee; } 
tr.show:nth-child(even) { background-color:#fff; } 

Answer 3

Các up-to-date và faster cách để thực hiện công việc là:

$('tr').removeClass(); 
$('tr:not(:hidden)').filter(':odd').addClass('odd'); 

Sau đó, bạn có thể tạo kiểu cho các dòng lẻ đó trong CSS với .odd {}