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

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

(2) Cliquez sur la ligne impaire

(3) Cliquez sur la ligne paire rangée

5. Annexe

Copier le code Le code est le suivant :

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

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