表格隔行换色
表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果.
传统的做法要在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> |
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> |
