Cách tốt hơn để xác định thậm chí/hàng lẻ trong bảng

Question

Giả sử bạn có một trang web với mã sau đây mẫu:

<tr class="even"> 
    <td>something1</td> 
    <td colspan="1">somthing1.1</td> 
</tr> 


<tr class="odd"> 
    <td>something2</td> 
    <td><b>something2.1</b></td> 
</tr> 

<tr class="even"> 
    <td>something3</td> 
    <td><b>something3.1</b></td> 
</tr> 

Đây không phải là trong một vòng lặp vì vậy tôi phải dứt khoát nói 'thậm chí' 'kỳ lạ'. Sau đó, nếu chúng ta quyết định thêm một hàng mới giữa something2 và something3 thì chúng ta cần thay đổi 'even' 'odd' cho phần còn lại của các hàng.

Có cách nào trong css để thực hiện điều này tự động trong IE6 không?

Hiện nay đây là mã css của tôi cho dù

.headerTable tr.even { 
    font-weight : bold; 
    font-size : 9pt; 
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva; 
    background-color: #FFFFFF; 
    height: 20px; 
    color: #000000; 
} 

Tôi đã có jQuery

Answer 1

Hãy thử jQuery. Sau đó, bạn chỉ cần thực hiện việc này:

$("#myTable tbody tr:visible:even",this).addClass("even"); 
    $("#myTable tbody tr:visible:odd",this).addClass("odd"); 

Bộ chọn ": hiển thị" không thực sự cần thiết, nhưng khi bạn lọc bảng bằng cách làm cho một số hàng bị ẩn, phương pháp sẽ vẫn hoạt động chính xác.

Answer 2

Sử dụng jQuery thậm chí/con lẻ implementation

Answer 3

Yes. Bạn có thể sử dụng JavaScript để chạy qua các phần tử này và đặt lại các lớp của chúng theo thậm chí/lẻ.

Answer 4

Cách tiếp cận tốt nhất sẽ là :nth-child() pseudo-class.

Nhưng tiếc là chưa được hỗ trợ rộng rãi. Vì vậy, có thể bạn sẽ cần phải sử dụng JavaScript để làm điều đó.

Answer 5

Cách để thực hiện việc này là sử dụng quy tắc thứ n (con) và (lẻ). Thật không may, và điều này sẽ đến như là không có gì ngạc nhiên, IE6 không hỗ trợ này. Vì vậy, bạn có một vài lựa chọn:

A) Sử dụng Javascript, với nhược điểm rõ ràng của nó không làm việc cho những người có JS khuyết tật:

var rows = document.getElementById('mytable').getElementsByTagName('tr'); 
for(var x = 0; x < rows.length; x++) { 
    rows[x].className = (x % 2 == 0) ? 'even' : 'odd'; 
} 

Nếu bạn mong muốn cần phải hành vi phía khách hàng năng động hơn trên ứng dụng của bạn , sau đó bạn có thể kiểm tra thư viện như jQuery. Đối với chỉ cần nó là không cần thiết, nhưng nó làm cho làm việc với Javascript trên các trình duyệt một cách dễ dàng. Bạn sẽ làm điều trên với jQuery như nó được hiển thị trong câu trả lời này.

Tùy thuộc vào đối tượng của bạn, Javascript có thể được chấp nhận hoàn toàn. Nếu không, thì có thể bạn có thể ...

B) Đơn giản hóa CSS của bạn và tiếp tục thực hiện thủ công. Bạn chỉ có thể đánh dấu các hàng lẻ bằng một lớp, và sau đó tạo kiểu mặc định cho hàng kiểu dáng đồng đều. Điều này sẽ giúp bạn tiết kiệm một số công việc khi di chuyển mọi thứ xung quanh.

C) Tạo các hàng theo lập trình. Nó thực sự là cổ xưa để được nhập dữ liệu như thế vào một bảng cố định nếu bạn sẽ được cập nhật nó thường xuyên đủ rằng đây là một vấn đề. Tôi rõ ràng là không biết gì về hoàn cảnh của bạn, nhưng nó sẽ là tầm thường để làm điều này trong một vòng lặp bằng cách nào đó với một ngôn ngữ đơn giản như PHP.

D) Dừng sử dụng trình duyệt thực sự đã lỗi thời. :) (Đây chỉ là một nửa nói đùa, vì tôi chắc chắn rằng nó nằm ngoài tầm kiểm soát của bạn)