鼠标事件之表格隔行换色

最新推荐文章于 2024-07-12 18:29:20 发布

产品迪

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量154

点赞数

分类专栏：前端文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_46054543/article/details/109480675

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

鼠标经过离开变色案例：

效果图：
在这里插入图片描述

核心思路如下：

一、利用for循环给四个按钮注册鼠标事件
二、单数建一个样式类
三、用this关键字（指向方法的调用者）className属性将当前指向的行加上类即可

scirpt核心代码如下：

<script>
    var trs = document.querySelector("tbody").querySelectorAll('tr');
    for (var i = 0; i < trs.length; i++) {
        trs[i].onmouseover = function () {
            this.className = 'bg';
        }
        trs[i].onmouseout = function () {
            this.className = '';
        }
    }
</script>

HTML结构代码如下：

<table align="center" border="0" width="500" height="200" cellspacing="0">
    <thead>
        <tr>
            <th>股市排名</th>
            <th>市场趋势</th>
            <th>股票代码</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td>1</td>
            <td>升 ↑</td>
            <td>666666</td>
        </tr>
        <tr>
            <td>2</td>
            <td>降 ↓</td>
            <td>844848</td>
        </tr>
        <tr>
            <td>3</td>
            <td>升 ↑</td>
            <td>886548</td>
        </tr>
        <tr>
            <td>4</td>
            <td>升 ↑</td>
            <td>856848</td>
        </tr>
        <tr>
            <td>5</td>
            <td>降 ↓</td>
            <td>895248</td>
        </tr>
    </tbody>
</table>

CSS样式代码如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    table {
        margin-top: 100px;
    }
    table thead {
        background-color: cornflowerblue;
    }
    table tbody {
        background-color: whitesmoke;
        cursor: pointer;
    }
    .bg {
        background-color: #a7cbff;
    }

</style>