当前位置: 编程技术>WEB前端
table行随鼠标移动变色示例
来源: 互联网 发布时间:2014-08-25
本文导语: 1、设计表格 代码如下: 工号 姓名 年龄 性别 2014010101 张峰 56 男 2014010102 李玉 42 女 2014010103 王珂 36 男 2014010104 张钰 31 女 2014010105 朱顾 44 男 2014010106 胡雨 35 女 2014010107 刘希 30 男 2014010108 孙宇 45 女 2014010109 谷...
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{
width: 1340;
height: 595;
}
.body_div{
font-size: 12px;
background-color: #CCCCCC;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 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)单击偶数行
5、附录
table随鼠标变色
.html_body .body_div{
width: 1340;
height: 595;
}
.body_div{
font-size: 12px;
background-color: #CCCCCC;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 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
男
2014010102
李玉
42
女
2014010103
王珂
36
男
2014010104
张钰
31
女
2014010105
朱顾
44
男
2014010106
胡雨
35
女
2014010107
刘希
30
男
2014010108
孙宇
45
女
2014010109
谷雨
33
男
2014010110
科宇
45
女
代码如下:
工号
姓名
年龄
性别
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{
width: 1340;
height: 595;
}
.body_div{
font-size: 12px;
background-color: #CCCCCC;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 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)单击偶数行
5、附录
代码如下:
table随鼠标变色
.html_body .body_div{
width: 1340;
height: 595;
}
.body_div{
font-size: 12px;
background-color: #CCCCCC;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 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
男
2014010102
李玉
42
女
2014010103
王珂
36
男
2014010104
张钰
31
女
2014010105
朱顾
44
男
2014010106
胡雨
35
女
2014010107
刘希
30
男
2014010108
孙宇
45
女
2014010109
谷雨
33
男
2014010110
科宇
45
女