Jquery报表隔行变色和鼠标经过高亮
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>表格隔行换色和鼠标经过高亮</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.js"></script> <script type="text/javascript" > $(document).ready(function() { $(".stripe tr").mouseover(function() { $(this).addClass("over"); }).mouseout(function() { $(this).removeClass("over"); }); $(".stripe tr:even").addClass("alt"); } ) </script> <style type="text/css"> /*注意选择器的层叠关系*/ th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; } td * { padding:6px 11px; } tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ } </style> </head> <body> <table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> <!--用class="stripe"来标识需要使用该效果的表格--> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>QQ</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>陈增鹏</td> <td>24</td> <td>47353327</td> <td>chenzengpeng@hotmail.com</td> </tr> <tr> <td>吴捷康</td> <td>25</td> <td>376002533</td> <td>wujiekangyun@126.com</td> </tr> <tr> <td>蓝舜瀚</td> <td>25</td> <td>530302367</td> <td>lanshunhan@gmail.com</td> </tr> <tr> <td>许境</td> <td>23</td> <td>31540205</td> <td>gl.deng@gmail.com</td> </tr> <tr> <td>邓国梁</td> <td>23</td> <td>31540205</td> <td>gl.deng@gmail.com</td> </tr> <tr> <td>邓国梁</td> <td>23</td> <td>31540205</td> <td>gl.deng@gmail.com</td> </tr> </tbody> </table> </body> </html>