コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jquery を使用してテーブルの奇数行と偶数行、およびアクティブな行の色を制御する方法_jquery

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

WBOY
リリース： 2016-05-16 16:51:58
オリジナル
1297 人が閲覧しました

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;
}


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



コードをコピーします
コードは次のとおりです。
jquery を使用して奇数と偶数で異なる色を実装するテーブル内の行





>

データ

;/tr>

データ
データ
データ


データ
データ

データ 🎜>データ
データ

データ
データ
データ 🎜>



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




コードをコピーします


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


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

テーブル tr:nth-child(odd) td,
テーブル tr: n 番目の子 (奇数) 番目 {
背景色:
}
関連ラベル：
jquery
ソース：php.cn
前の記事：jquery easyui と jsp を組み合わせてテーブルデータを単純に表示する example_jquery 次の記事：jQuery では、bind、live、または on_jquery を使用して、将来の要素イベントをバインドします。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート