鼠标事件之表格隔行换色-蒲公英云

鼠标事件之表格隔行换色

末蓝、 2022-11-22 10:13 355阅读 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>