communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Exemple de lignes de tableau changeant de couleur lorsque la souris se déplace_jquery

Exemple de lignes de tableau changeant de couleur lorsque la souris se déplace_jquery

WBOY
Libérer： 2016-05-16 16:49:31
original
1226 Les gens l'ont consulté

1、设计表格

复制代码 代码如下 :






































































工号 姓名 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女




2、设计样式
复制代码 代码如下:

.html_body .body_div{
largeur : 1340 ;
hauteur : 595 ;
}
.body_div{
taille de police : 12 px ;
couleur de fond : #CCCCCC ;
}
.tr_odd{
couleur de fond : orange ;
}
.tr_even{
couleur de fond : aqua ;
}
.mouse_color{
couleur de fond : vert ;
}
#tab{
bordure : 1px #FF0000 solide ;
text-align : centre ;
largeur : 100 % ;
hauteur : 100 % ;
}

3、设计JS
复制代码 代码如下 :

//设置奇数行背景色
$("#tab tr:odd").find("td").addClass("tr_odd");
//设置偶数行背景色
$("#tab tr:even").find("td").addClass("tr_even");

/**
* Couleur de la souris déplacée vers
*/
$("#tab tr").mouseover(function(){
$(this).find("td").addClass(" mouse_color");
});

/**
* Couleur du déplacement de la souris
*/
$("#tab tr").mouseout(function(){
$(this).find("td").removeClass(" mouse_color");
});

4. Résultats de conception

(1) Initialisation
Exemple de lignes de tableau changeant de couleur lorsque la souris se déplace_jquery
(2) Cliquez sur la ligne impaire
Exemple de lignes de tableau changeant de couleur lorsque la souris se déplace_jquery
(3) Cliquez sur la ligne paire rangée
Exemple de lignes de tableau changeant de couleur lorsque la souris se déplace_jquery
5. Annexe
Copier le code Le code est le suivant :

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>





table随鼠标变色

















































































工号 姓名 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女





Étiquettes associées：
变色
source：php.cn
Article précédent：Exemple d'utilisation de la minuterie dans les astuces JavaScript_javascript Article suivant：jQuery sous Android : introduction à AQuery_jquery
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
Derniers articles par auteur
Derniers numéros
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1361
Les tableaux PHP obtenus à partir des paramètres d'URL ne se comportent pas comme prévu J'ai un paramètre d'URL qui contient l'identifiant de la catégorie et je souhaite le trait...
Depuis 2024-04-06 22:09:02
0
1
1428
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Où dois-je placer la directive CustomLog dans Apache J'utilise php:7.2-apachedocker. Je dois désactiver le journal d'accès à la connexion à l'U...
Depuis 2024-04-06 22:03:59
0
1
990
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal