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

CSS を使用して代替テーブル行の色を作成する

CSS を使用してテーブル行の背景色を動的に切り替えるには、CSS プロパティを操作できます。 table 要素と row 要素の。

n 番目の子の使用セレクター:

CSS の n 番目の子セレクターを使用して、奇数行または偶数行をターゲットにすることができます。例:

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

このルールは、テーブル本体内のすべての奇数行を青色の背景と白色のテキストでスタイル設定します。

jQuery の使用:

または、JavaScript を使用して行を動的に識別し、スタイルを設定することもできます。 jQuery の場合:

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

このコードはすべての奇数行を選択し、背景色を黒に、テキストの色を白に設定します。

テーブル要素へのスタイルの適用:

テーブル全体に交互の色の効果を適用したい場合は、これを使用できますアプローチ:

<table class="alternate_color">
  ...
</table>

.alternate_color tr:nth-child(odd) {
  background-color: #f5f5f5;
}

この場合、テーブルにクラスを追加し、CSS ルールはそのテーブル内のすべての奇数行を対象とします。

注: の使用行の色を交互に変更するためのテーブル要素のクラスは、テーブルに適用される既存のスタイル ルールと干渉する可能性があるため、一般的には、tr で直接 nth-child セレクターを使用することが推奨されます。要素。

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