鼠标事件之表格隔行换色

末蓝、 2022-11-22 10:13 183阅读 0赞

## 鼠标经过离开变色案例： ##

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]

*核心思路如下：*

> 一、利用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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f319db4fe2cb460b95058a658478442b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标事件之表格隔行换色

鼠标经过离开变色案例：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

末蓝、/ 2022年11月22日 10:13/ 0 赞/ 184 阅读

相关 css隔行换色和鼠标划过变色

css table隔行换色和鼠标划过变色 tr{ background: white;} tr:nth-child(2n){ background:

女爷i/ 2022年08月19日 04:49/ 0 赞/ 155 阅读

相关 CSS之Table表格隔行换色之简洁版

效果如下： ![图片][20170207161340222] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

浅浅的花香味﹌/ 2022年07月12日 02:19/ 0 赞/ 188 阅读

相关用jstl实现表格的隔行换色

jstl的隔行换色在tr标签的里边加上代码： <tr ${ vs.count%2==1? "style='background-color:red'" : "

淩亂°似流年/ 2022年06月08日 08:12/ 0 赞/ 181 阅读

相关 js之表格隔行换色

步骤分析：第一步：确定事件(onload)并为其绑定一个函数第二步：书写函数(获取表格) 第三步：获取tbody里面的行数第四步：对tbody里面的行进行

╰+攻爆jí腚メ/ 2022年05月31日 08:51/ 0 赞/ 200 阅读

相关隔行换色并且鼠标指向行变色的表格

一应用对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。二代码 <s

小咪咪/ 2022年05月12日 00:36/ 0 赞/ 211 阅读

相关使用jQuery完成表格隔行换色

addClass(class):为每个匹配的元素添加指定的类名。 HTML 代码: <p>Hello</p> jQuery 代码: $("p").a

绝地灬酷狼/ 2022年04月21日 22:40/ 0 赞/ 200 阅读

相关 JavaScript jQuery隔行换色

<script type="text/javascript"> $(function() { //隔行变色 $("changeColor tr:

梦里梦外;/ 2022年04月03日 05:23/ 0 赞/ 248 阅读

相关 js隔行换色

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

r囧r小猫/ 2022年03月19日 02:38/ 0 赞/ 237 阅读

相关利用js实现表格隔行换色效果

利用js实现表格隔行换色效果首先我们来看一下实现的效果，如下图所示：思路：确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:...

小灰灰/ 2020年06月03日 12:45/ 0 赞/ 681 阅读