0

1 行おきに別の色で表示したい。色はCSSで指定しています。そして、ほとんどの行は適切に機能しています。確認したところ、行には class="odd" または class="even" が含まれていますが、一部の行には class="odd even" および class="even odd" が含まれています。それはどのように起こっていますか？クラスを「偶数奇数」または「偶数奇数」としている理由を誰かが説明できますか。前もって感謝します。 

table.dataTable .odd { background-color:  red; }
table.dataTable .even { background-color: green;  }
4

3 に答える 3

5

なぜこれにクラスを使用しているのですか？

tr {background-color:white}
tr:nth-child(even) {background-color:black}
于 2013-06-25T11:13:10.037 に答える
0

古いブラウザー (IE8 など) をサポートする必要がある場合、nth-child は機能しません。簡単な回避策は、Kolink と falguni のソリューションを組み合わせることです。

tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}

$(document).ready(function(){
  $("tr:even").addClass('even');
});

ファルグニが提供したソリューションには悪い習慣があり、JSを使用してスタイルを更新しています。黒ではなく青にする必要があると判断した場合は、2 つの場所を変更する必要があります。私の例ではそれは必要ありません。

私のコードは改善できます。ユーザーが :nth-selector をサポートしているかどうかを確認し、パフォーマンスのために IF NOT (クラスを追加) することができます。

于 2013-06-25T11:19:32.973 に答える
0

CSSを試す

tr:nth-child(even) {
    background-color: #000000;
}

JavaScript

 $(document).ready(function()
    {
      $("tr:even").css("background-color", "#000000");
    });

また

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
于 2013-06-25T11:14:06.830 に答える