js实现表格隔行变色

最新推荐文章于 2024-04-03 11:53:03 发布

南风number

最新推荐文章于 2024-04-03 11:53:03 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45730243/article/details/111473318

js 专栏收录该内容

55 篇文章

订阅专栏

<!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>
    * {
        margin: 0;
        padding: 0;
    }

    table {
        margin: 200px auto;
        /* 表格的边框合并，如果相邻，则共用一个边框。 */
        border-collapse: collapse; 
        /* 设置行与单元格边框的间距。 */
        border-spacing: 0px; 
    }

    thead {
        background: blue;
    }
    tr{
        border-bottom: 1px solid #000000;
    }

    .bg {
        background: green;
    }
</style>
</head>


<body>
    <table>
        <thead>
            <td>代码</td>
            <td>名称</td>
            <td>最新公布净值</td>
            <td>累计净值</td>
            <td>前单位净值</td>
            <td>净值增长率</td>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.035%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.035%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.035%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.035%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.035%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.035%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.获取元素 获取的是 tbody 里面所有的行
        let trs = document.querySelector('tbody').querySelectorAll('tr')
        //2.利用for循环绑定注册事件
        for (let i = 0; i < trs.length; i++) {
            //3.鼠标经过事件 onmouseover
            trs[i].onmouseover = function () {
                this.className = 'bg'
            }
            //4.鼠标离开事件
            trs[i].onmouseout = function () {
                this.className = ''
            }
        }
    </script>
</body>

</html>