jQuery双色表格的实现

效果：

jQuery双色表格

 

代码：

<!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>
<title> jquery </title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
     //jQuery ready is quicker than onload
     $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
     $(".stripeMe tr:even").addClass("alt");
});
</script>
<style type="text/css">
table.sample {
     border-collapse: collapse;
     width: 50%;
     margin: 24px;
     font-size: 1.1em;
}
table.sample th {
     background: #3e83c9;
     color: #fff;
     font-weight: bold;
     padding: 2px 11px;
     text-align: left;
     border-right: 1px solid #fff;
     line-height: 1.2;
}
table.sample td {
     padding: 6px 11px;
     border-bottom: 1px solid #95bce2;
     vertical-align: top;
}
table.sample td * {
     padding: 6px 11px;
}
table.sample tr.alt td {
     background: #ecf6fc;
}
table.sample tr.over td {
     background: #bcd4ec;
}
</style>
<table class="stripeMe sample">
     <thead>
         <tr>
             <th>Lorem</th>
             <th>Ipsum</th>
             <th>Dolor</th>
             <th>Sit</th>
             <th>Amet</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
         <tr>
             <td>Lorem</td>
             <td>Ipsum</td>
             <td>Dolor</td>
             <td>Sit</td>
             <td>Amet</td>
         </tr>
     </tbody>
</table>
</body>
</html>

 

最近在支付宝UED读到一个比较有启示的文章，增补上来：符合WEB标准的表格行滑过高亮效果

posted on 2008-10-13 17:17  color-fever  阅读(574)  评论(0)    收藏  举报

导航