隔行换色鼠标指向表格换色

最新推荐文章于 2021-08-19 16:36:26 发布

愤怒的笨鸟

最新推荐文章于 2021-08-19 16:36:26 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/qq_45593083/article/details/102771222

版权

<script language="JavaScript" src="jquery-3.4.1.min.js"></script>
  <title>隔行换色鼠标指向表格换色</title>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th>产品名称</th>
     <th>产地</th>
     <th>厂商</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th>爱美电视机</th>
     <th>福州</th>
     <th>爱美电子</th>
    </tr>
    <tr>
     <th>syoss洗发膏</th>
     <th>广东</th>
     <th>优美化妆品</th>
    </tr>
    <tr>
     <th>华硕电脑</th>
     <th>北京</th>
     <th>永恒电子</th>
    </tr>
    <tr>
     <th>相印纸手帕</th>
     <th>湖南恒安</th>
     <th>湖南恒安纸业有限公司</th>
    </tr>
    
   </tbody>
  </table>
  <style type="text/css">
   table{
    border: 0;
    border-collapse: collapse;/* 设置表格整体样式 */
   }
   td{
    font:normal 12px/17px Arial;/* 设置单元格的样式 */
    padding: 2px;/* 改变上下左右的填充 */
    width: 100px;
   }
   th{
    font: bold 12px/17px Arial;
    text-align: left;
    padding: 4px;
    border-bottom: 1px solid #333;
   }
   .odd{
    background: #cef;/* 设置奇数行样式 */
   }
   .even{
    background: #ffc;/* 设置偶数行样式 */
   }
   .light{
    background: #cef;/* 设置鼠标移到行的样式 */
   }
  </style>
  <script type="text/javascript">
   $(document).ready(function(){
    $("tbody tr:odd").addClass("odd");//为偶数行添加样式
    $("tbody tr:even").addClass("even");//为奇数行添加样式
    $("tbody tr").hover(     //为表格主体每行绑定hover方法
    function(){$(this).addClass("light");},
    function(){$(this).removeClass("light");}
    );
   });
  </script>
 </body>

愤怒的笨鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
隔行换色鼠标指向表格换色

<script language="JavaScript" src="jquery-3.4.1.min.js"></script> <title>隔行换色鼠标指向表格换色</title> </head> <body> <table> <thead> <tr> ...
复制链接

扫一扫