隔行变色一

最新推荐文章于 2021-06-17 09:55:44 发布

索引在线

最新推荐文章于 2021-06-17 09:55:44 发布

阅读量86

点赞数

分类专栏： JQuery文章文章标签： jQuery JavaScript XHTML CSS HTML ViewUI

本文链接：https://blog.csdn.net/mimang2008110/article/details/83839787

版权

JQuery文章专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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-1.4.3.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>

索引在线

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隔行变色一

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &
复制链接

扫一扫

专栏目录