jQuery表格隔行换色

表格隔行换色

表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果.

传统的做法要在tr里加 onMouseOver="this.className='two'" onMouseOut="this.className='one'" 很麻烦

jQuery只用5行代码就搞定。

<script type="text/javascript" src="jquery.js"></script>

效果展示：

姓名	年龄	MSN	Email
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css

JS代码

1  < script type = " text/javascript " >
2  $(document).ready( function (){
3  $( " .stripe_tb tr " ).mouseover( function (){  // 如果鼠标移到class为stripe_tb的表格的tr上时，执行函数
4  $( this ).addClass( " over " );}).mouseout( function (){  // 给这行添加class值为over，并且当鼠标一出该行时执行函数
5  $( this ).removeClass( " over " );})  // 移除该行的class
6  $( " .stripe_tb tr:even " ).addClass( " alt " );  // 给class为stripe_tb的表格的偶数行添加class值为alt
7  });
8  < / script>

CSS代码

1  <style type="text/css">  /* 注意选择器的层叠关系 */
2  .stripe_tb th { background : #B5CBE6 ;  color : #039 ;  line-height : 20px ;  height : 30px }
3  .stripe_tb td { padding : 6px 11px ;  border-bottom : 1px solid #95bce2 ;  vertical-align : top ;  text-align : center }
4  .stripe_tb td * { padding : 6px 11px }
5  .stripe_tb tr.alt td { background : #ecf6fc }   /* 这行将给所有偶数行加上背景色 */
6  .stripe_tb tr.over td { background : #FEF3D1 }   /* 这个将是鼠标高亮行的背景色 */
7  </style>

HTML代码

 1  < table  class ="stripe_tb"  border ="0"  cellpadding ="0"  cellspacing ="0"  width ="50%" >
 2        <!-- 用class="stripe_tb"来标识需要使用该效果的表格 -->
 3        < thead >
 4            < tr >
 5                < th > 姓名 </ th >
 6                < th > 年龄 </ th >
 7                < th > MSN </ th >
 8                < th > Email </ th >
 9            </ tr >
10        </ thead >
11        < tr >
12            < td > Owen </ td >
13            < td > 30 </ td >
14            < td > owen.net@hotmail.com </ td >
15            < td >< a  href ="http://www.cnblogs.com/css/" > css </ a ></ td >
16        </ tr >
17        < tr >
18            < td > Owen </ td >
19            < td > 30 </ td >
20            < td > owen.net@hotmail.com </ td >
21            < td >< a  href ="http://www.cnblogs.com/css/" > css </ a ></ td >
22        </ tr >
23        < tr >
24            < td > Owen </ td >
25            < td > 30 </ td >
26            < td > owen.net@hotmail.com </ td >
27            < td >< a  href ="http://www.cnblogs.com/css/" > css </ a ></ td >
28        </ tr >
29        < tr >
30            < td > Owen </ td >
31            < td > 30 </ td >
32            < td > owen.net@hotmail.com </ td >
33            < td >< a  href ="http://www.cnblogs.com/css/" > css </ a ></ td >
34        </ tr >
35        < tr >
36            < td > Owen </ td >
37            < td > 30 </ td >
38            < td > owen.net@hotmail.com </ td >
39            < td >< a  href ="http://www.cnblogs.com/css/" > css </ a ></ td >
40        </ tr >
41        < tr >
42            < td > Owen </ td >
43            < td > 30 </ td >
44            < td > owen.net@hotmail.com </ td >
45            < td >< a  href ="http://www.cnblogs.com/css/" > css </ a ></ td >
46        </ tr >
47  </ table >

转载于:https://www.cnblogs.com/css/archive/2008/07/23/1249622.html