홀수 표시된 어린이를위한 스타일

Question

홀수 (또는 심지어 짝수)의 어린이에게 표시되는 스타일을 찾고 있습니다 (숨겨진 어린이 제외). Optionnaly, 숨겨진 자식이 표시 될 때 적용되는 스타일은 완벽 할 것입니다! http://jsfiddle.net/qJwFj/ (물론, 단지 표시 예이야, 내가 그것에 대해 쓴 엉터리 코드 알아서하지 않음)

: 나는 시각적으로 원하는 것을 여기 http://jsfiddle.net/zrges/1/

된다 : 여기

라이브 샌드 박스입니다

좋은 의사 클래스, CSS 선택기로 처리 할 수 ​​없습니다.

나는 (쉽게 아닌 JS/PHP는 하나) 전체 CSS/HTML 솔루션

매우 감사를하도록 노력하겠습니다!

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

JS :

테이블의

Answer 1

, 당신은

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

또는

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

Answer 2

CSS를 사용할 수 있습니다

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

이 체크 아웃 : 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"); 
}); 
});​