使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果

我几次想尝试终于被我弄成功了!

前提条件:将jquery-1.2.6.js导入进来,<script src="jquery-1.2.6.js" type="text/javascript"></script> ,jquery-1.2.6.js可以去http://jquery.com/官网下。

本代码优化后支持IE和Firefox,只需在table属性设置width和class="stripe"即可,废话少说,直接附源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<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">
<!--
 .stripe { border-collapse:collapse; font-size:12px;margin-left: auto; margin-right: auto;}
 th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px;border:1px solid #95bce2;} 
 td { padding:6px 11px; border-bottom:1px solid #95bce2; border-right:1px solid #95bce2; vertical-align:top; text-align:center;}
 tr > td:first-child { border-left:1px solid #95bce2;} 
 tr.alt { background:#ecf6fc;}  /*这行将给所有的tr加上背景色*/
 tr.over { background:#bcd4ec;} /*这个将是鼠标高亮行的背景色*/
-->
</style>
</head>
 
<body>
<table class="stripe" width="50%">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>QQ</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>[email protected]</td>
  </tr>
</tbody>
</table>
<p align="center">笑的自然于2008年11月12日最后编辑...</p>
</body>
</html>

你可能感兴趣的:(jquery,css,function,XHTML,Class,firefox)