利用JS实现表格的隔行变色效果-蒲公英云

利用JS实现表格的隔行变色效果

我就是我 2023-07-03 03:18 2阅读 0赞

在开发中我们经常会看见表格隔行变色的案例
为了在看表格里面的数据不小心看错行数,所以就有了这样的效果
成果图在这里插入图片描述
html和css代码

<style>
        table{ 
            width: 500px;
            margin: 100px auto;
            padding: 0;
        }
        thead{ 
            text-align: center;
            background-color:cornflowerblue;
        }
        td{ 
            border-bottom: 1px solid #ccc;
        }
        .bg{ 
            background-color: powderblue;
        }
    </style>
------html-----
<table>
        <thead>
        <tr><td>这是表头</td></tr>
        </thead> 
        <tbody> 
            <tr><td>第1行</td></tr>
            <tr><td>第2行</td></tr>
            <tr><td>第3行</td></tr>
            <tr><td>第4行</td></tr>
            <tr><td>第5行</td></tr>
        </tbody>  
    </table>
<script>
        // 获取所有行
        var hang = document.querySelector("tbody").querySelectorAll("tr");
        //注册事件
        // 遍历每行,给每一行都绑定
        for(var i=0; i<hang.length; i++){ 
            // 鼠标经过事件
            hang[i].onmouseover = function(){ 
                this.className = "bg";
            }
            //鼠标离开事件
            hang[i].onmouseout = function(){ 
                this.className = "";
            }
        }
    </script>