Kiểu cho trẻ lẻ được hiển thị

Question

Tôi đang tìm cách áp dụng một số kiểu cụ thể cho trẻ em lẻ (hoặc thậm chí) được hiển thị (để loại trừ trẻ em bị ẩn). Optionnaly, nếu kiểu đó được áp dụng khi trẻ ẩn sẽ được hiển thị, nó sẽ hoàn hảo!

Đây là một sandbox sống: http://jsfiddle.net/zrges/1/

Và đây là những gì tôi trực quan muốn: http://jsfiddle.net/qJwFj/ (tất nhiên, nó chỉ là một ví dụ hiển thị, không chăm sóc của mã không hấp dẫn mà tôi đã viết cho rằng)

Tôi không thể quản lý với các lớp giả tốt, bộ chọn css để xử lý điều đó.

tôi hy vọng sẽ có một giải pháp đầy đủ css/html (không phải là một js/php một, đó là dễ dàng hơn)

Cảm ơn bạn rất nhiều!

Answer 1

Đối với các bảng, bạn có thể sử dụng

tr:nth-child(even) { // your style } 
tr:nth-child(odd) { // your style} 

hoặc

tr:nth-child(2n+0) { // your style } 
tr:nth-child(2n+1) { // your style} 

Answer 2

css:

tr.sub { display: none; } 
​.color { background: blue; }​ 

js:

$(document).ready(function() { 
    $('table tr:visible:even').addClass('color'); 

    $('#toggle').click(function() { 
     $('table tr').removeClass('color'); 
     $('table tr.sub').toggle(); 
     $('table tr:visible:even').addClass('color'); 
    }); 
});​ 

Answer 3

Check this out: http://jsfiddle.net/qbXVV/18/

HTML:

<button id="toggle">Toggle it!</button> 
<table> 
    <tr class="sub"><td>Row 1</td></tr> 
    <tr class="tag"><td>Row 2</td></tr> 
    <tr class="sub"><td>Row 3</td></tr> 
    <tr class="tag"><td>Row 4</td></tr> 
    <tr class="sub"><td>Row 5</td></tr> 
    <tr class="tag"><td>Row 6</td></tr> 
    <tr class="sub"><td>Row 7</td></tr> 
</table>​ 

CSS:

 tr:nth-of-type(even),.bg { 
     background-color: gray; 
    } 

    .hidden { 
     display:none; 
    }​ 

JS:

$(document).ready(function() { 
$('#toggle').click(function() { 
    $('.tag').toggleClass("hidden"); 
    $(".sub:nth-child(4n+1)").toggleClass("bg"); 
}); 
});​