jquery を使用してテーブルの奇数行と偶数行、およびアクティブな行の色を制御する方法_jquery

jquery は何年も前から人気がありますが、私はいつも難しく感じていて、ある日気まぐれに眺めただけで、何日も経つとすっかり忘れてしまっていました。最近、奇数行と偶数行の異なる色のテーブルを使用し、jquery をもう一度見なければなりませんでしたが、まだ難しく感じますが、以前ほど難しくはなくなりました。完成した後、jquery は本当に素晴らしいとため息をつきます。実装するために多くの JavaScript 関数を記述する必要はありません。簡単な文で簡単に実装できます。

まず、次のようにテーブルの奇数行スタイルと偶数行スタイルを定義します。

コードをコピーします コード

body {
font-size:12px;
}

th {
color: #FFFFFF; A172AC;
}

テーブル td,テーブル th {
パディング: 0.5em;
ボーダー:0; ;
}
/* 奇数項目 1,3,5,7,... */
table tbody tr.odd,
.odd {
background: #FBD106; >}

/* 偶数項目 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B; >}

/* ホバーされたアイテム */
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: # FFFFFF;
}


次に、ページ コードがあります:

コードをコピーします

コードは次のとおりです。

>

データ

;/tr>

データ
データ
データ


データ
データ

データ 🎜>データ
データ

データ
データ
データ 🎜>



必要ない場合奇数行と偶数行では色が異なるため、CSS を直接使用できます。




コードをコピーします


コードは次のとおりです:


table tr:nth-child(even) td,
テーブル tr:nth-child(even) th {
背景色: #FBD106;
}

テーブル tr:nth-child(odd) td,
テーブル tr: n 番目の子 (奇数) 番目 {
背景色:
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。