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 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>