Tek görüntülenen çocuklar için Stil

Question

Görüntülenen bazı garip (veya çift) çocuklara bazı özel stiller uygulamak için bir yol arıyorum (gizli çocuklar hariç). Optionnaly, eğer bu stiller gizli çocuklar görüntülendiğinde uygulanmışsa mükemmel olurdu! http://jsfiddle.net/qJwFj/ (tabii ki, bunun sadece bir görüntüleme örneği, bunun için yazdım bok kod bakım yapmayız)

: Ben görsel olarak istediğim burada http://jsfiddle.net/zrges/1/

Ve edilir: Burada

canlı kum olduğunu

Bunu yapmak için iyi sözde sınıflar, css seçiciler ile başaramıyorum.

I (daha kolaydır değil js/php bir,) tam bir css/html çözümü

Çok teşekkür ederim umuyoruz!

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

js:

tabloları için

Answer 1

, sen

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

veya

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

Answer 2

css kullanabilirsiniz

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

Bu kontrol edin: 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: Bu birkaç kez istendi

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