JavaScript高手之路：隔行异色效果_web前端奇数行颜色相同-CSDN博客

本文链接：https://blog.csdn.net/zhang5476499/article/details/87399037

本文详细介绍了如何使用原生JavaScript实现隔行异色效果，通过为奇数行和偶数行设置不同的背景颜色，同时在鼠标悬停时改变当前行的背景颜色，以增强用户交互体验。

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

上一章节我们使用原生JSS实现了全选、不选、反选效果，这一这章节我们来实现隔行异色效果，隔行异色的意思是某表格中奇数行和奇数行的颜色相同，偶数行和偶数行的颜色要相同，奇数行和偶数行的颜色不同，奇偶相间达到隔行异色的效果。
隔行异色效果图隔行异色的效果图如上，奇数行背景颜色为antiquewhite，偶数行背景颜色为aqua奇偶相间，当鼠标移动到某一行的时候，该行背景颜色变红，鼠标移除时恢复原来的颜色。
页面的html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行异色</title>
    <style>
        div {
            padding: 20px;
            margin: 5px;
            border: solid 1px #000;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

页面的最初轮廓如此，存在11个div，每个div定义了对应的样式，控制div具有表格行的效果，但是这时候的每一行背景颜色还只是单调的透明色，接下来我们编写代码实现奇偶相间异色效果。

首先需要定义奇数行和偶数行以及当前选中行的背景颜色。

        .odd {
            background-color: aqua;
        }
        .even {
            background-color: antiquewhite;
        }
        .active {
            background-color: red;
        }

在css中定义了三个class的样式，每个class的样式只定义了背景颜色，现在我们来看看js代码怎么实现的。

        var BgChange = function () {
            this.aDiv = document.getElementsByTagName("div");

            this.init = function() {
                for(var i = 0; i < this.aDiv.length; i++) {
                    if(i%2 == 0) { //偶数行
                        this.aDiv[i].className = "odd";
                    } else { //奇数行
                        this.aDiv[i].className = "even";
                    }
                }
            };
        }

一如既往的，该BgChange类具有aDiv类成员属性，记录每一行div的节点，在init方法中循环遍历每一个div，如果当前行号除以2等于0，则赋值class为odd，否则class赋值为even。

接下来我们应该监听鼠标的移入和移除事件，当鼠标移入某一行时，背景颜色变为红色，移除时还原为原来的颜色,代码显示如下：

            this.changeBgColor = function () {
                oldClassName = "";

                //循环遍历每一个div
                for(var i = 0; i < this.aDiv.length; i++) {
                    //给每一行注册鼠标移入事件
                    this.aDiv[i].onmouseover = function () {
                        oldClassName = this.className;
                        this.className = "active";
                    };
                    this.aDiv[i].onmouseout = function () {
                        this.className = oldClassName;
                    }
                }
            };

该方法中用了一个oldClassName来记录当前行的class，当鼠标移除厨房onmounseout事件的时候即可还原原来的颜色，完整的BgChange类代码如下：

        var BgChange = function () {
            this.aDiv = document.getElementsByTagName("div");

            this.init = function() {
                for(var i = 0; i < this.aDiv.length; i++) {
                    if(i%2 == 0) { //偶数行
                        this.aDiv[i].className = "odd";
                    } else { //奇数行
                        this.aDiv[i].className = "even";
                    }
                }
            };
            this.changeBgColor = function () {
                oldClassName = "";

                //循环遍历每一个div
                for(var i = 0; i < this.aDiv.length; i++) {
                    //给每一行注册鼠标移入事件
                    this.aDiv[i].onmouseover = function () {
                        oldClassName = this.className;
                        this.className = "active";
                    };
                    this.aDiv[i].onmouseout = function () {
                        this.className = oldClassName;
                    }
                }
            };
        }

驱动代码如下：

        window.onload = function () {
            var bgChange = new BgChange();
            bgChange.init();
            bgChange.changeBgColor();
        }