ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryでインターレースカラー変更を実現する方法

jqueryでインターレースカラー変更を実現する方法

青灯夜游
青灯夜游オリジナル
2022-04-22 17:25:071953ブラウズ

実装方法: 1. "$("Element:nth-of-type(keyword)")" を使用して偶数行と奇数行の要素をそれぞれ選択し、偶数要素を選択するには "even" を設定し、 "odd" "オプションの奇数番号の要素; 2. "css("color 属性", "color value")" を使用して、偶数行と奇数行の要素にそれぞれ異なる色のスタイルを追加します。

jqueryでインターレースカラー変更を実現する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery でインターレースの色変化を実現

実装方法:

  • <span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif"> </span>:nth-of-type() を使用します。セレクターは偶数行と奇数行を選択します。

  • css() を使用して、偶数行と奇数行にそれぞれスタイルを追加します。さまざまな設定の色 Color

実装例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					
					$("tr:nth-of-type(even)").css("background","red");
					$("tr:nth-of-type(odd)").css("background","pink");
				});
			});
		</script>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>商品</th>
				<th>价格</th>
			</tr>
			<tr>
				<td>T恤</td>
				<td>¥100</td>
			</tr>
			<tr>
				<td>牛仔褂</td>
				<td>¥250</td>
			</tr>
			<tr>
				<td>牛仔库</td>
				<td>¥150</td>
			</tr>
		</table><br>
		<button>隔行变色</button>

	</body>
</html>

jqueryでインターレースカラー変更を実現する方法

説明:

:nth-of-type(n) セレクターは、親要素から特定の型の n 番目の子要素であるすべての要素を選択します。

キーワードevenおよびoddとともに使用すると、偶数行と奇数行を選択できます

  • evenは偶数の各サブ要素を選択します。

  • odd 奇数の子要素をすべて選択します。

【推奨学習: jQuery ビデオ チュートリアル Web フロントエンド ビデオ ]

以上がjqueryでインターレースカラー変更を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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