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随鼠标变色
工号 |
姓名 |
年龄 |
性别 |
2014010101 |
张峰 |
56 |
男 |
2014010102 |
李玉 |
42 |
女 |
2014010103 |
王珂 |
36 |
男 |
2014010104 |
张钰 |
31 |
女 |
2014010105 |
朱顾 |
44 |
男 |
2014010106 |
胡雨 |
35 |
女 |
2014010107 |
刘希 |
30 |
男 |
2014010108 |
孙宇 |
45 |
女 |
2014010109 |
谷雨 |
33 |
男 |
2014010110 |
科宇 |
45 |
女 |
Stellungnahme:Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn