CSS と JavaScript を使用して HTML テーブルで交互の行の色を作成するにはどうすればよいですか?

CSS を使用したテーブル行の代替色付けの実現

HTML テーブルでは、行に交互の色を割り当てると視覚的な魅力が向上し、データが読みやすくなります。これは、個々の tr 要素に適用される CSS クラスを使用するか、table 要素自体をスタイル設定することによって実現できます。

CSS クラスの使用

提供される HTML と CSS は、CSS クラス (tr.d0 および tr.d0 および tr) を利用します。 .d1) を使用して行に色を付けます。ただし、テーブル内の位置に基づいて行に色を付けるには、 tbody 要素内の :nth-child セレクターを利用できます。例:

tbody tr:nth-child(2n+1) {
  background-color: #CC9999;
  color: black;
}
tbody tr:nth-child(2n) {
  background-color: #9999CC;
  color: black;
}

テーブル スタイルの使用

または、table 要素を使用してテーブル全体のスタイルを設定することもできます。すべての奇数行を特定の色にするには、次の CSS を利用できます:

table tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

JavaScript (jQuery) の使用

もう 1 つのアプローチには、JavaScript (jQuery) の使用が含まれます:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

以上がCSS と JavaScript を使用して HTML テーブルで交互の行の色を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。