cssにて nth-child display:none

Question

前提・実現したいこと

htmlにてテーブル内の<tr>タグ要素を交互に色分けして表示したい

発生している問題・エラーメッセージ

しかし、ボタンで出し分けをする関係で、<tr>タグがdisplay:noneになったりならなかったりするので
cssの「:nth-child(even)」がうまく働いてくれない。

試したこと

例

<tr class="test_1 on" style="display: table-row;">...</tr> <tr class="test_2 on" style="display: table-row;">...</tr> <tr class="test_3 off" style="display: none;">...</tr> <tr class="test_4 on" style="display: table-row;">...</tr> <tr class="test_5 off" style="display: none;">...</tr> <tr class="test_6 off" style="display: none;">...</tr>

//------------------------------
// test_1 (背景:白)
//------------------------------
//------------------------------
// test_2 (背景:黒)
//------------------------------
//------------------------------
// test_4 (背景:黒)　←　本当は白くしたい
//------------------------------

ボタン押下

<tr class="test_1 off" style="display: none;">...</tr> <tr class="test_2 on" style="display: table-row;">...</tr> <tr class="test_3 on" style="display: table-row;>...</tr> <tr class="test_4 off" style="display: none;">...</tr> <tr class="test_5 on" style="display: table-row;">...</tr> <tr class="test_6 off" style="display: none;">...</tr>

//------------------------------
// test_2 (背景:黒)　←　本当は白くしたい
//------------------------------
//------------------------------
// test_3 (背景:白) ←　本当は黒くしたい
//------------------------------
//------------------------------
// test_5 (背景:白)
//------------------------------

css

tr.on:nth-child(even){
background:#e6e9f0;
}

cssでtrタグのclass="on"のものにnth-childで偶数番目を黒くするというロジックなのですが、どうもclass="off"も含めてしまっているようなのです。
説明下手で申し訳ないですが、どなたかいい方法ご存じありませんか?

Answer 1

tr.on:nth-child(even){

「偶数番目のtrのonクラスがついているもの」と解釈してください
onクラスのn番目というのはcssの処理ではありません

Comments

[_silver]

cssでは制御は不可能ということでしょうか。
jqueryでなら実現できますか？
それとも、display:noneは諦めて、要素を動的に作ったり消したりする必要があるということでしょうか?

Answer 2

if($('tr[class^=test_]').css('display')){
   
~~~~~~~~~~~中略~~~~~~~~~~~~
                
   $(".test_" + z).each(function(i){
       if(i%2==0){
           $(this).addClass('on_' + 'black');
       }else{
           $(this).addClass('on_' + 'white');
       }
   });            
}             

tr.on_black{
background:#e6e9f0;
}

こんな感じで、表示中の<tr>に上からclassを連番で付与し、on_blackのみcssで
黒くするようにして実現しました