表格隔行变色效果

超级无敌奥特蔓

已于 2022-03-26 18:08:29 修改

阅读量473

点赞数

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

于 2022-03-26 18:03:55 首次发布

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123760401

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：鼠标经过tr行，当前行变背景色，鼠标离开，去掉当前行的背景色。把表头放到thead中，把表身放到tbody中，这样可以区分开来实现效果。始终要遵守事件三要素，获取元素，然后利用循环绑定注册事件。

鼠标经过事件：onmouseover

鼠标离开事件：onmouseout

<!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 {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #ccc;
            font: size 12px;
            color: blue;
        }
        
        .change {
            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>222</td>
                <td>进多单</td>
                <td>111</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>222</td>
                <td>进多单</td>
                <td>111</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>222</td>
                <td>进多单</td>
                <td>111</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>222</td>
                <td>进多单</td>
                <td>111</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>222</td>
                <td>进多单</td>
                <td>111</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
        </tbody>
        <script>
            var tr = document.querySelector("tbody").querySelectorAll("tr");
            for (var i = 0; i < tr.length; i++) {
                tr[i].onmouseover = function() {
                    //鼠标经过事件 onmouseover
                    this.className = "change";
                };
                tr[i].onmouseout = function() {
                    //鼠标离开事件 onmouseout
                    this.className = "";
                };
            }
        </script>
    </table>
</body>

</html>

超级无敌奥特蔓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格隔行变色效果

思路：首先将表格写出，再为其添加js效果。把表头放到thead中，把表身放到tbody中，这样可以区分开来实现效果。始终要遵守事件三要素，获取元素，然后利用循环绑定注册事件。鼠标经过事件：onmouseover鼠标离开事件：onmouseout<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-C.
复制链接

扫一扫

专栏目录