onmouseover+onmouseout ：表格隔行变色

灰太狼 2023-10-03 14:50 103阅读 0赞

表格隔行变色

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>表格隔行变色</title>
  9.     <style>
  10.         table {
  12.             width: 800px;
  13.             margin: 100px auto;
  14.             text-align: center;
  15.             border-collapse: collapse;
  16.             font-size: 14px;
  17.         }
  19.         thead tr {
  21.             height: 30px;
  22.             background-color: skyblue;
  23.         }
  25.         tbody tr {
  27.             height: 30px;
  28.         }
  30.         tbody td {
  32.             border-bottom: 1px solid #d7d7d7;
  33.             font-size: 12px;
  34.             color: blue;
  35.         }
  37.         .bg {
  39.             background-color: #cccccc;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <table>
  47.         <thead>
  48.             <tr>
  49.                 <!--  tr行   th列 -->
  50.                 <th>代码</th>
  51.                 <th>名称</th>
  52.                 <th>最新公布净值</th>
  53.                 <th>累计净值</th>
  54.                 <th>前单位净值</th>
  55.                 <th>净值增长率</th>
  56.             </tr>
  57.         </thead>
  59.         <tbody>
  60.             <tr>
  61.                 <td>003526</td>
  62.                 <td>农银金穗3个月定期开放债券</td>
  63.                 <td>1.075</td>
  64.                 <td>1.079</td>
  65.                 <td>1.074</td>
  66.                 <td>+0.047%</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>003526</td>
  70.                 <td>农银金穗3个月定期开放债券</td>
  71.                 <td>1.075</td>
  72.                 <td>1.079</td>
  73.                 <td>1.074</td>
  74.                 <td>+0.047%</td>
  75.             </tr>
  76.             <tr>
  77.                 <td>003526</td>
  78.                 <td>农银金穗3个月定期开放债券</td>
  79.                 <td>1.075</td>
  80.                 <td>1.079</td>
  81.                 <td>1.074</td>
  82.                 <td>+0.047%</td>
  83.             </tr>
  84.             <tr>
  85.                 <td>003526</td>
  86.                 <td>农银金穗3个月定期开放债券</td>
  87.                 <td>1.075</td>
  88.                 <td>1.079</td>
  89.                 <td>1.074</td>
  90.                 <td>+0.047%</td>
  91.             </tr>
  92.             <tr>
  93.                 <td>003526</td>
  94.                 <td>农银金穗3个月定期开放债券</td>
  95.                 <td>1.075</td>
  96.                 <td>1.079</td>
  97.                 <td>1.074</td>
  98.                 <td>+0.047%</td>
  99.             </tr>
  100.             <tr>
  101.                 <td>003526</td>
  102.                 <td>农银金穗3个月定期开放债券</td>
  103.                 <td>1.075</td>
  104.                 <td>1.079</td>
  105.                 <td>1.074</td>
  106.                 <td>+0.047%</td>
  107.             </tr>
  108.         </tbody>
  110.     </table>
  112.     <script>
  113.         // 1.获取元素 获取的是 tbody 里面所有的行
  114.         var trs = document.querySelector('tbody').querySelectorAll('tr');
  115.         // 2. 利用循环绑定注册事件
  116.         for (var i = 0; i < trs.length; i++) {
  119.             // 3. 鼠标经过事件 onmouseover
  120.             trs[i].onmouseover = function () {
  122.                 // console.log(11);
  123.                 this.className = 'bg';
  124.             }
  126.             // 4. 鼠标离开事件 onmouseout
  127.             trs[i].onmouseout = function () {
  129.                 this.className = '';
  130.             }
  131.         }
  132.     </script>
  133. </body>
  135. </html>

发表评论

表情：
评论列表 （有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ListView隔行变色

    ListView隔行变色也许我们工作中或用到，有的客户会要求你变换listView的颜色，这样看起来比较好看所以我就自己写了 关于隔行变色的代码。 不多说直接上代码： 这是

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 306 阅读