テーブルの行を交互にする背景色のスタイルを設定するにはどうすればよいですか？

Question

私は、物事が動的にフェッチされたときに、この種の設計をどうやってやるのだろうと思っていましたか？ブロックが奇数か偶数かに応じて背景色を取得するために使用できるクラスは1つだけでなければならないということです。私は私の要求が明確であることを願っています：バックグラウンドカラーは、行の奇数または偶数で変化します。

Answer 1

交番行の第CSSクラスを追加します。ここでデフォルトのbg色が濃いグレーであると仮定すると、2番目のクラスは次のようになります。

.altRow { background-color：white！important; }

2番目のクラスを適用するロジックサーバー側をコーディングする必要がない場合は、JQueryのOdd selectorを使用できます。しかし、それはもうちょうど第二のクラスを手動で適用することなく、ゼブラストライピングに近づくことです。

Answer 2

は何が欲しいのモジュラス分周

if(rowNum % 2 == 0) {class="even"} else {class="odd"} 

であるか、CSS3を使用している場合、あなたはあなたが行を交互に探している、この

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF} 

Answer 3

のようにそれを行うことができます。これは、他のすべての行に異なるクラスを追加することで実現できます。

Tutorials are plentyこの方法については、クラスを追加することなく、

CSS3 also provides a new way to do this：

tr:nth-child(odd) { background-color:#eee; } 
tr:nth-child(even) { background-color:#fff; } 

Answer 4

あなたがコードを返す何の言語を指定していないてきたように私はあなたの純粋なCSSの答えを与えるでしょう。

tr:nth-child(2n+1) {YOURSTYLEINHERE} 
or 
tr:nth-child(odd) {YOURSTYLEINHERE}