用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 儿童节 23
2021年 端午节 36
2022年 元 旦 237
2022年 春 节 268
 
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现鼠标经过表格行给出颜色标识

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta http-equiv='X-UA-Compatible' content='IE=edge'meta name='viewport' content='width=device-width, initial-scale=1.0'titleDocum......

      <!DOCTYPE html>

    <html lang="en">


    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

    * {

    margin: 0;

    padding: 0;

    }


    table {

    margin: 100px auto;

    width: 800px;

    border-spacing: 0;

    text-align: center;

    }


    table tr:nth-child(1) {

    background-color: rgb(135, 206, 235);

    }


    table tr:nth-child(n+2) {

    border-bottom: 1px solid black;

    }


    th {

    font-size: 14px;

    padding-top: 5px;

    padding-bottom: 5px;

    }


    td {

    font-size: 12px;

    padding-top: 8px;

    padding-bottom: 8px;

    color: blue;

    border-bottom: 1px solid lightgray;

    }

    </style>

    </head>


    <body>

    <table>

    <tr>

    <th>代码</th>

    <th>名称</th>

    <th>最新公布净值</th>

    <th>累计净值</th>

    <th>前单位净值</th>

    <th>净值增长率</th>

    </tr>

    <tr>

    <td>003526</td>

    <td>农银金穗3个月定期开放债券</td>

    <td>1.075</td>

    <td>1.079</td>

    <td>1.074</td>

    <td>+0.047%</td>

    </tr>

    <tr>

    <td>003526</td>

    <td>农银金穗3个月定期开放债券</td>

    <td>1.075</td>

    <td>1.079</td>

    <td>1.074</td>

    <td>+0.047%</td>

    </tr>

    <tr>

    <td>003526</td>

    <td>农银金穗3个月定期开放债券</td>

    <td>1.075</td>

    <td>1.079</td>

    <td>1.074</td>

    <td>+0.047%</td>

    </tr>

    <tr>

    <td>003526</td>

    <td>农银金穗3个月定期开放债券</td>

    <td>1.075</td>

    <td>1.079</td>

    <td>1.074</td>

    <td>+0.047%</td>

    </tr>

    <tr>

    <td>003526</td>

    <td>农银金穗3个月定期开放债券</td>

    <td>1.075</td>

    <td>1.079</td>

    <td>1.074</td>

    <td>+0.047%</td>

    </tr>

    <tr>

    <td>003526</td>

    <td>农银金穗3个月定期开放债券</td>

    <td>1.075</td>

    <td>1.079</td>

    <td>1.074</td>

    <td>+0.047%</td>

    </tr>



    </table>


    <script>

    var rows = document.querySelectorAll(' table tr:nth-child(n+2)');

    for (var i = 0; i < rows.length; i++) {

    rows[i].onmouseover = function() {

    this.style.backgroundColor = "lightblue";

    }

    rows[i].onmouseout = function() {

    this.style.backgroundColor = "";

    }

    }

    </script>

    </body>


    </html>

      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/4/12 发布时间:10:49:43 点击:233 录入:齐天大圣
  • 上一篇:标题栏上的滚动字幕代码
  • 下一篇:JavaScript实现鼠标经过显示下拉框
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.1 Build 21.05.08(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021
    您正在使用IPV4(3.230.154.160)访问本站 您本次共访问本站 1 次