Comment utiliser jQuery pour obtenir un effet de couleur entrelacée-Questions et réponses frontales-php.cn

Comment utiliser jQuery pour obtenir un effet de couleur entrelacée

WBOY

Libérer： 2022-06-09 11:00:59

original

2697 Les gens l'ont consulté

Méthode : 1. Utilisez le sélecteur ":odd" et la méthode css() pour définir la couleur des éléments de ligne impairs. La syntaxe est "$(":odd").css("color attribut", "color value") "; 2. Utilisez le sélecteur ":even" et la méthode css() pour définir la couleur des éléments de ligne pairs. La syntaxe est "$(":even").css("color attribut", "valeur de couleur")".

Comment utiliser jQuery pour obtenir un effet de couleur entrelacée

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.4.1, ordinateur Dell G3.

Comment utiliser jQuery pour obtenir un effet de changement de couleur entrelacé

1. Définissez la couleur des éléments de ligne avec des numéros d'index impairs

: le sélecteur impair sélectionne chaque élément avec un numéro d'index impair (par exemple : 1, 3, 5). , etc.) .

Les valeurs d'index commencent à 0, le premier élément est un nombre pair (0), le deuxième élément est un nombre impair (1), et ainsi de suite.

L'utilisation la plus courante : utilisé avec d'autres sélecteurs pour sélectionner chaque élément impair dans la combinaison spécifiée.

La syntaxe est la suivante : La méthode

$(":odd")

Copier après la connexion

css() définit ou renvoie un ou plusieurs attributs de style de l'élément sélectionné.

2. Définissez la couleur des éléments de ligne avec des numéros d'index pairs

: le sélecteur pair sélectionne chaque élément avec un numéro d'index pair (par exemple : 0, 2, 4, etc.).

Les valeurs d'index commencent à 0, le premier élément est un nombre pair (0), le deuxième élément est un nombre impair (1), et ainsi de suite.

Utilisation la plus courante : utilisé avec d'autres sélecteurs pour sélectionner chaque élément pair dans la combinaison spécifiée

La syntaxe est

$(":even")

Copier après la connexion

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr:odd").css("background-color","yellow");
  $("tr:even").css("background-color","pink");
});
</script>
</head>
<body>
<table border="1">
<tr>
  <th>姓名</th>
  <th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>123131</td>
</tr>
<tr>
<td>李四</td>
<td>456464</td>
</tr>
<tr>
<td>王五</td>
<td>78979879</td>
</tr>
<tr>
<td>赵钱</td>
<td>147741</td>
</tr>
<tr>
<td>周吴</td>
<td>852258</td>
</tr>
</table>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment utiliser jQuery pour obtenir un effet de couleur entrelacée