अजीब प्रदर्शित बच्चों के लिए शैली

Question

मैं प्रदर्शित होने वाले विषम (या यहां तक ​​कि) बच्चों पर कुछ विशिष्ट शैलियों को लागू करने का एक तरीका देख रहा हूं (इसलिए छुपे हुए बच्चों को छोड़कर)। Optionnaly, अगर छुपा बच्चों को प्रदर्शित होने पर वह शैलियों लागू होती है तो यह सही होगा! http://jsfiddle.net/zrges/1/

और यहाँ है कि मैं क्या नेत्रहीन हैं::

यहाँ एक लाइव सैंडबॉक्स है http://jsfiddle.net/qJwFj/ (जाहिर है, यह केवल एक प्रदर्शन उदाहरण है, भद्दा कोड है कि मुझे लगता है कि के लिए लिखा था की देखभाल नहीं करते हैं)

मैं इसे संभालने के लिए अच्छे छद्म वर्ग, सीएसएस चयनकर्ताओं के साथ प्रबंधन नहीं कर सकता।

मैं एक पूर्ण सीएसएस/HTML समाधान (नहीं एक js/php है, जो आसान है)

आपको बहुत बहुत धन्यवाद की उम्मीद है!

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

सीएसएस का उपयोग कर सकते

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

सीएसएस:

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

    .hidden { 
     display:none; 
    }​ 

जे एस:

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