Jquery设置表格行为
1 <head runat="server">
2 <title>改变表格行为</title>
3 <script src=Resources\js\jquery-1.2.1.js type="text/javascript"></script>
4 <script type="text/javascript">
5 $(document).ready(function(){
6 $(".stripe tr").mouseover(function(){
7 //如果鼠标移到class为stripe的表格的tr上时，执行函数
8 , ; $(this).addClass("悬浮");}).mouseout(function(){
9 //给这行添加class值为over，并且当鼠标一出该行时执行函数
10 $(this).removeClass("悬浮");}) //移除该行的class
11 $(".stripe tr:even").addClass("偶数");
12 //给class为stripe的表格的偶数行添加class值为:偶数
13 $(".stripe tr:odd").addClass("奇数");
14 //给class为stripe的表格的偶数行添加class值为:奇数
15 });
16 </script>
17 <style>
18 th {
19 background:#0066FF;
20 color:#FFFFFF;
21 line-height:20px;
22 height:30px;
23 }
24
25 td {
26 padding:6px 11px;
27 border-bottom:1px solid #95bce2;
28 vertical-align:top;
29 text-align:center;
30 }
31
32 td * {
33 padding:6px 11px;
34 }
35
36 tr.奇数 td {
37 background:#ecf6fc; /*设置奇数行颜色*/
38 }
39 tr.偶数 td {
40 background:#ecf6ee; /*设置偶数行颜色*/
41 }
42
43 tr.悬浮 td {
44 background:#6699ff; /*这个将是鼠标高亮行的背景色*/
45 }
46
47 </style>