JavaScript修改表格行的背景色，鼠标所在行颜色高亮

最新推荐文章于 2023-08-26 11:05:53 发布

原创最新推荐文章于 2023-08-26 11:05:53 发布 · 3.4k 阅读

7 ·

CC 4.0 BY-SA版权

aaa

文章标签：

#javascript #前端 #html

本文介绍了如何使用JavaScript为HTML表格的行设置动态背景色，实现偶数行浅黄色，奇数行浅红色，并在鼠标悬停时切换为浅绿色，移除时恢复原色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

使用JS修改表格行的背景色，产生隔行变色的效果，鼠标移上去的时候这一行变成其它颜色，移出去的时候还原成之前的背景色。

案例分析

创建三个类样式，分别用于设置背景色为浅红，浅黄，浅绿。
通过标签名得到所有的tr行
在窗体加载完毕的事件中遍历所有的行，如果是偶数，则设置它的背景色为浅黄色，否则为浅红色
设置鼠标在上面和在外面的事件，鼠标在上面的事件中，记录没有换颜色之前的颜色，再设置类样式为浅绿色。设置一个全局变量记录之前的类样式名。
如果鼠标移出之后，要回到原来的颜色，将全局变量记录的样式名赋值给当前行的类样式名。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JS修改表格行的背景色</title>
    <style type="text/css">
        table {
            margin: auto;
            border‐collapse: collapse;
        }
        tr {
            text‐align: center;
            height: 32px;
        }
        .redStyle {
            background: lightpink;
        }
        .yellowStyle {
            background: lightyellow;
        }
        .greenStyle {
            background: lightgreen;
        }
    </style>
    <script type="text/javascript">
        //记录颜色
        var color = "";
        window.onload = function () {
//获取所有行
            var trNodes = document.getElementsByTagName("tr");
//遍历所有的行，如果是偶数，则设置为浅黄色
            for (var index = 1; index < trNodes.length; index++) {
                if (index % 2 == 0) {
                    trNodes[index].className = "yellowStyle";
                } else {
                    trNodes[index].className = "redStyle";
                }
                //鼠标经过的事件
                trNodes[index].onmouseover = function () {
//记录没有换颜色之前的颜色
                    color = this.className;
                    this.className = "greenStyle";
                }
//鼠标移出事件
                trNodes[index].onmouseout = function () {
//如果鼠标移出之后，要回到原来的颜色。
                    this.className = color;
                }
            }
        }
    </script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tr style="background‐color: #ccc;">
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>

效果

在这里插入图片描述