CSSの色付けテーブルの問題

私は奇数のものとは異なる色の偶数行の色付きテーブルを作成しようとしていました。私は唯一の問題は、非表示の行でも行えなければならないということです。行2を非表示にすると、行1と行3に同じ色が表示されるためです。ここでCSSの色付けテーブルの問題

は、私が持っているものです。

tr:not([display="none"]):nth-child(even){ 
    background: #EFEFFF; 
} 
tr:not([display="none"]):nth-child(odd){ 
    background: #E0E0FF; 
}

ブラウザはフィルタリングしないので、このコードは私のために動作しません：ないと：n番目の子を与えられた順序に従って。提案がありますか？そして、あなたは目に見えない/行を見えるようとしてクラスを追加/削除するためにjqueryのを使用

tr.visible:nth-child(even) { 
    background: #EFEFFF; 
} 
tr.visible:nth-child(odd){ 
    background: #E0E0FF; 
}

：あなたのようにそれを書くことができるように

出典

2011-08-14 Gonzalo

隠し要素を選択するには_element属性selector_を使用しようとしていますが、 'display'はCSSプロパティです。 –

Aaahhだから問題だった。どうもありがとうございました;）。私は与えられた "クラスの解決策"を試してみます。 – Gonzalo

あなたが表示されている行にクラスを追加してもらえますか？

出典

2011-08-14 03:55:34 boatcoder

+1はパンチに私を打つ;） –

それはかなりクールなトリックだ。私は、選択されたセット*に[nth-child]が働いていることに気づいていませんでした。* [CSS3 spec（http://www.w3.org/TR/css3-selectors/#nth-child-pseudo）奇数または偶数のような音はツリーに基づいて計算されます。 – OverZealous

haha誰かがその解決策を考え出すと思った。回避策（犯罪なし）のように見えない解決策があるかどうかを知りたかっただけです。 – Gonzalo

同様の問題に取り組もうとしているうちに、ここで終了しました。フィルタリング後に追加されたクラスに基づいてCSSを更新するために、次のJSを使用しました。

$('tr.visible').filter(':odd').css('background-color', '#EFEFFF'); 
$('tr.visible').filter(':even').css('background-color', '#E0E0FF');

ゼロインデックス配列のために反転した色に注意してください。

出典

2014-10-09 19:40:14

CSSの色付けテーブルの問題

答えて

関連する問題