jQuery表格隔行换色
表格隔行换色
表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果.
传统的做法要在tr里加 onMouseOver="this.className='two'" onMouseOut="this.className='one'" 很麻烦
jQuery只用5行代码就搞定。
<script type="text/javascript" src="jquery.js"></script>
效果展示:
姓名 | 年龄 | MSN | |
---|---|---|---|
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>
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>
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>
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>