Maison > interface Web > js tutoriel > Comment utiliser jquery pour contrôler la couleur des lignes paires et impaires du tableau et des rows_jquery actifs

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

WBOY
Libérer: 2016-05-16 16:51:58
original
1296 Les gens l'ont consulté

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 :


head>

Utiliser jquery pour implémenter différentes couleurs pour les impairs et les pairs lignes du tableau





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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal