案例 :表格隔行变色效果

2020-06-01 16:54:42 阅读：254 来源： 互联网

标签：表格 1.083 1.08 0.33% 隔行 1.009 农银金穗变色 trs

当鼠标落在表格某一行行，某一行变粉色当离开恢复原色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 20px;
            background-attachment: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>112</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.083</td>
                <td>1.08</td>
                <td>1.009</td>
                <td>+0.33%</td>
            </tr>

            <tr>
                <td>113</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.083</td>
                <td>1.08</td>
                <td>1.009</td>
                <td>+0.33%</td>
            </tr>

            <tr>
                <td>114</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.083</td>
                <td>1.08</td>
                <td>1.009</td>
                <td>+0.33%</td>
            </tr>

            <tr>
                <td>115</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.083</td>
                <td>1.08</td>
                <td>1.009</td>
                <td>+0.33%</td>
            </tr>

            <tr>
                <td>116</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.083</td>
                <td>1.08</td>
                <td>1.009</td>
                <td>+0.33%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.获取元素 获取的是tbody里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //2.利用循环 绑定注册事件
        for(var i = 0 ; i < trs.length ;i++)
        {
            //3.鼠标经过事件onmouseover
            trs[i].onmouseover = function() {
                console.log('绑定成功');
                this.className = 'bg';
            }
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>
</html>

标签：表格,1.083,1.08,0.33%,隔行,1.009,农银金穗,变色,trs
来源： https://www.cnblogs.com/qiujie-prion/p/13026013.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

案例 :表格隔行变色效果