jQuery表格隔行換色

表格隔行換色

表格行間隔行用不同顏色表示,便於信息瀏覽,同時具有鼠標經過行高亮效果.

傳統的做法要在tr里加 onMouseOver="this.className='two'" onMouseOut="this.className='one'" 很麻煩

jQuery只用5行代碼就搞定。

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

效果展示：

姓名	年齡	MSN	Email
Owen	30	[email protected]	css
Owen	30	[email protected]	css
Owen	30	[email protected]	css
Owen	30	[email protected]	css
Owen	30	[email protected]	css
Owen	30	[email protected]	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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</td>
45          <td><a href="http://www.cnblogs.com/css/">css</a></td>
46      </tr>
47 </table>