Comment obtenir un changement de couleur entrelacé dans jquery-Questions et réponses frontales-php.cn

Comment obtenir un changement de couleur entrelacé dans jquery

青灯夜游

Libérer： 2022-04-22 17:25:07

original

1969 Les gens l'ont consulté

Méthode d'implémentation : 1. Utilisez "$("Element:nth-of-type(keyword)")" pour sélectionner respectivement les éléments de lignes paires et de lignes impaires, définissez "pair" pour sélectionner les éléments pairs et "impair" pour sélectionner Élément de nombres impairs ; 2. Utilisez "css("attribut de couleur", "valeur de couleur")" pour ajouter différents styles de couleur aux éléments de lignes paires et de lignes impaires respectivement.

Comment obtenir un changement de couleur entrelacé dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

jquery pour obtenir un changement de couleur entrelacé

méthode d'implémentation :

<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, å¾®è½¯é ›… é»', Tahoma, Arial, sans-serif">Utilisez le sélecteur <code><span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, å¾®è½¯é›…é»‘, Tahoma, Arial, sans-serif">使用</span>:nth-of-type():nth-of-type() pour sélectionner les lignes paires et les lignes impaires
Utilisez css() pour sélectionner les lignes paires et lignes impaires respectivement Ajoutez des styles et définissez différentes couleurs

Exemple d'implémentation :

<!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>

Copier après la connexion

Comment obtenir un changement de couleur entrelacé dans jquery