jQueryの/ CSS：テーブルにクラスを割り当てるには、その順序

Question

可能性の重複に依存します：

<tbody> 
<tr> 
    <th></th> 
    <th></th> 
    <th></th> 
    <th></th> 
</tr> 

<tr> 
    <th></th> 
    <th></th> 
    <th></th> 
    <th></th> 
</tr> 

<tr> 
    <th></th> 
    <th></th> 
    <th></th> 
    <th></th> 
</tr> 

<tr> 
    <th></th> 
    <th></th> 
    <th></th> 
    <th></th> 
</tr> 

... 
</tbody> 

、それがいっている：
A better way to determine even/odd rows in table

私はこのテーブルを持っています... 私は、奇妙なクラスを追加する準備が整った医者になりたいし、その位置にも依存します。このようなものになるには：

<tbody> 
    <tr class="odd"> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 

    <tr class="even"> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 

    <tr class="odd"> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 

    <tr class="even"> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 

    ... 
    </tbody> 

これを達成する方法は何ですか。私が持っているテーブルの数を数え、クラスを追加する必要がありますか？それは私には安全/適切な方法では聞こえません。

Answer 1

あなたドンする場合純粋なCSSソリューションが必要な場合は、jqueryを使用して:odd/:evenセレクタを使用してください。それ以外の場合はシルコの解決策が良いです。私はわずかな使いやすさのために `（奇数）`と `n番目の子（さえ）` n番目の子をお勧めしたい

​$("table tr:odd").addClass("odd"); 
​$("table tr:even").addClass("even"); 

Answer 2

nth-child擬似セレクタ(MDN link)をご覧ください。

あなただけのいくつかのスタイルを割り当てたい場合には使用：

tr:nth-child(2n+1) { // odd rows } 
tr:nth-child(2n) { // even rows } 

EDIT：

を、これは読みやすさを改善するデビッド・トーマスによって示唆されるように：

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