jquery方式的表格效果（隔行变色，单行高亮）

bluemusic

浏览: 48845 次
性别:
来自: 上海

最近访客更多访客>>

liaoyang.777

bada25

guipf2012

118

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery JavaScript XHTML CSS HTML

<!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>表格</title>
   <script src="jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(document).ready(function(){
     $("#ta tr").mouseover(function(){
      $(this).addClass("over");
     });
     $("#ta tr").mouseout(function(){
      $(this).removeClass("over");
     }); 
    
     $("#ta tr:even").addClass("double"); 
    });
   </script>
   <style type="text/css">
th{
background: gray;
color: white;
}

table{
width: 30em;
height: 10em;
}

td {
    border-bottom:1px solid #95bce2;
    text-align:center;
}

tr.over td{
background: #D6E8F8;
font-weight: bold;
}

tr.double td{
background: #DAF3F1;
}
   </style>
</head>

<body>
   <table id="ta" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>籍贯</th>
     <th>手机</th>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>alp</td>
     <td>zweizig</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
   </table>
</body>
</html>