table行隨滑鼠移動變色範例_jquery

1.設計表格

複製程式碼程式碼如下：

第
第個姓名第>個
年齡
性別第>
tr>

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{
寬度：1340;
身高：595;
}
.body_div{
字體大小：12px；
背景顏色：CCCCCCCCC； >}
.tr_odd{
背景顏色：橘色；
}
.tr_even{
背景顏色：淺綠色；
}
.mouse_color{
背景顏色：綠色；
}
#tab{
邊框：1px #FF0000 實心；
文字對齊：居中；
寬度：100%；

高度：100%；
寬度：100%；
高度：100%；

} 3、設計JS

複製程式碼


程式碼如下：


程式碼如下：


程式碼如下：


碼🎜>//設定奇數行背景色
$("#tab tr:odd").find("td").addClass("tr_odd");
//設定偶數行背景色
$("#tab tr:even").find("td").addClass("tr_even");

/**
* 滑鼠移到的顏色
*/

$("#tab tr") .mouseover(function(){ $(this).find("td").addClass(" mouse_color"); }); /*** 滑鼠移出的顏色 */ $("#tab tr").mouseout(function(){ $(this).find("td").removeClass(" mouse_color"); });
4、設計結果

（1）初始化
 
（2）按奇數行
 
（3）按一下偶數行
 
（3）按偶數行

 5、附錄複製程式碼

程式碼如下:

;



.html_body .body_div{
寬度：1340;
身高：595;
}
.body_div{
字體大小：12px；
背景顏色：#CCCCCC ;
}
.tr_odd{
背景顏色：橘色；
}
.tr_even{
背景顏色：淺綠色；
}
.mouse_color{
背景顏色：綠色；
}
#tab{
邊框：1px #FF0000 實心；
文字對齊：居中；
寬度：100%；
高度：100%；
}
樣式>

$(function(){
//設定奇數行背景色
$("# tab tr:odd").find("td").addClass("tr_odd");
//設定偶數行背景色
$("#tab tr:even").find("td" ).addClass("tr_even");

/**
* 滑鼠移到的顏色
*/
$("#tab tr").mouseover(function(){
$(this).find ("td").addClass("mouse_color");
}); >/**
* 滑鼠移出的顏色
*/
$("#tab tr").mouseout(function(){
$ (this).find("td").removeClass("mouse_color");
})
});
腳本>

頭>

第
第個姓名第>個
年齡
性別第>


2014010101
張峰
56 td>
男


2014010102
李玉
42
女


2014010103
王珂
36
男


2014010104
張鈺
31
女


2014010105
朱顧
44
男


2014010106
胡雨
35
女 td>


2014010107
劉希
30
男


2014010108
孫宇
45
女


2014010109
穀雨
33
男


2014010110
科宇
45
女

表>

身體>