用jquery+css控制表格样式

表格效果如下:点滑过时变色

 

 

代码:

 

1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. "http://www.w3.org/1999/xhtml" >
4.     
6.     "../Js/jquery.js" type="text/javascript">
7.     "text/javascript">
8.         $(function(){
9.           Test("#e0e0e0","Teal","#ffffff","#ffffff");
10.         });
11.         
12.         function Test(evenBg,oddBg,evenBgNew,oddBgNew)
13.         {
14.            var trs=$("#mainTable tr");
15.            var oddTr=$("#mainTable tr:odd");
16.            var evenTr=$("#mainTable tr:even");
17.            
18.            evenTr.css("background-color",evenBg);
19.            oddTr.css("background-color",oddBg);
20.            alert(oddTr.eq(0).html());
21.           // var oLength=oddTr.length
22.            for(var i=0;i
23.            {
24.               oddTr.eq(i).bind("mouseover",function(){            
25.                  $(this).css("background-color",oddBgNew);
26.                  $(this).css("cursor","pointer");
27.               });
28.               
29.               oddTr.eq(i).bind("mouseout",function(){               
30.                $(this).css("background-color",oddBg);
31.               });
32.               
33.               evenTr.eq(i).bind("mouseout",function(){
34.                 $(this).css("background-color",evenBg);
35.               });
36.               
37.               evenTr.eq(i).bind("mouseover",function(){
38.                 $(this).css("background-color",evenBgNew);
39.                  $(this).css("cursor","pointer");
40.               });
41.            }
42.           
43.            
44. //           if(oddTr.length>evenTr.length)
45. //           {
46. //               oddTr[oddTr.length-1].bind("onmouseover",function(){
47. //                oddTr[i].css("background-color",oddBgNew);
48. //              }); 
49. //           }
50. //           else
51. //           {
52. //             evenTr[evenTr.length-1].bind("onmouseover",function(){
53. //                evenTr[i].css("background-color",evenBgNew);
54. //              });
55. //           }
56.            
57.         }
58.     
59.     "text/css">
60.         *
61.         {
62.             margin:0px;
63.             padding:0px;
64.             font-size:12px;
65.             text-align:center;  
66.             color:Yellow;
67.             
68.         }
69.         #mainTable
70.         {
71.             width:500px;
72.             border:5px solid #e0e0e0;
73.             margin-top:40px;
74.         }
75.         
76.         #mainTable tr
77.         {
78.             height:25px;
79.             border:1px solid #e0e0e0;   
80.           
81.         }
82.     
85.     
86.     class="style1" id="mainTable" >
87.         这里是表格内容这里是表格内容
88.         这里是表格内容这里是表格内容
89.         这里是表格内容这里是表格内容
90.         这里是表格内容这里是表格内容
91.         这里是表格内容这里是表格内容
92.         这里是表格内容这里是表格内容
93.         这里是表格内容这里是表格内容
94.         这里是表格内容这里是表格内容
95.         这里是表格内容这里是表格内容
96.         这里是表格内容这里是表格内容
97.         这里是表格内容这里是表格内容
98.         这里是表格内容这里是表格内容
99.         这里是表格内容这里是表格内容
101.     
102.