Comment utiliser jquery pour contrôler la couleur des lignes paires et impaires du tableau et des rows_jquery actifs

Bien que jquery soit populaire depuis de nombreuses années, je l'ai toujours trouvé difficile et je n'ai pas pris le temps de l'apprendre. Je le regarde juste de temps en temps sur un coup de tête un jour, puis j'oublie tout après plusieurs jours. Récemment, j'ai utilisé un tableau avec des lignes paires et impaires de couleurs différentes, et j'ai dû revoir jquery. Même si cela semble toujours difficile, ce n'est plus aussi difficile qu'avant. Après l'avoir terminé, je dois soupirer que jquery est vraiment génial, je n'ai pas besoin d'écrire beaucoup de fonctions javascript pour l'implémenter, cela peut être fait facilement avec seulement quelques phrases.

Définissez d'abord le style de ligne paire et impaire du tableau, comme suit :

Copiez le code Le code est le suivant :

body {
font-size:12px
}

th {
color: #FFFFFF;
background: # A172AC ;
}

table,table td,table th {
remplissage : 0,5em ;
bordure :0
espacement de bordure :0; ;
}
/* éléments impairs 1,3,5,7,... */
tableau tbody tr.impair,
.impair {
fond : #FBD106; >}

/* éléments pairs 2,4,6,8,... */
tableau tbody tr.even,
.even {
fond : #E6453B ; >}

/* éléments survolés */
.odd:hover,
.even:hover,
.hover {
fond : #4BB747 ;
couleur : # FFFFFF;
}


Ensuite il y a le code de la page :

Copiez le code Le le code est le suivant :

head>

>données
données ;/tr>

données données
>données
données
🎜>données
données
données
données
🎜>

Si non requis Pour les événements de souris, tant que les lignes paires et impaires ont des couleurs différentes, vous pouvez directement utiliser CSS.




Copier le code


Le code est le suivant :


table tr:nth-child(pair) td,
table tr:ntième-enfant(pair) th {
couleur de fond:
}

tableau tr:ntième-enfant(impair) td,
table tr : nième-enfant (impair) th {
couleur de fond : #E6453B
}