js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色

最新推荐文章于 2022-06-09 15:11:02 发布

原创最新推荐文章于 2022-06-09 15:11:02 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现HTML表格的隔行变色、鼠标移上换色、鼠标离开恢复颜色以及点击行显示行号和颜色的功能。通过for循环和三元运算符，巧妙地实现了事件处理的复用。

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

隔行变色:
先获取要操作的HTML标签

var oLis = document.querySelectorAll('li')

循环HTML标签

for (var i = 0; i < oLis.length; i++) {}

利用for循环达到一条三元判断语句就能为奇数行和偶数行换上不同的背景颜色

oLis[i].style.background = i % 2 ? 'blue' : 'red';

鼠标移上变色：
在for循环中创建鼠标移上事件并从新为该html标签上背景色
利用for循环来达到一条鼠标移上事件就能复用的目的

oLis[i].onmouseenter = function () {
     this.style.background = 'gold';
}

鼠标移出恢复原本的颜色：
在for循环中创建鼠标移出事件并从新为该html标签换上之前的背景色
利用for循环来达到一条鼠标移出事件就能复用的目的

oLis[i].onmouseleave = function () {
     this.style.background = this.myBg;
}

点击html元素弹出点击的是哪行html元素和点击的html行数是什么颜色:
在for循环中添加一个保存行数的变量

oLis[i].myIndex = i;

在for循环中添加一个保存颜色的变量

oLis[i].myBg = i % 2 ? 'blue' : 'red';

在for循环中创建鼠标点击事件并在事件里填入警告显示
利用for循环来达到一条鼠标点击事件就能复用的目的

oLis[i].onclick = function(){
     alert(`这是第${this.myIndex}行 背景颜色是${this.myBg}`);
}

完整代码

<body>
   <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
			var oLis = document.querySelectorAll('li');// 获取html元素
            for (var i = 0; i < oLis.length; i++) {
                 oLis[i].myBg = i % 2 ? 'blue' : 'red'; // 保存颜色
                 oLis[i].myIndex = i;  // 保存行数
                 oLis[i].style.background = i % 2 ? 'blue' : 'red'; // 判断奇、偶行 并为奇、偶行上色
                 oLis[i].onmouseenter = function () { // 鼠标移上事件 function:鼠标事件 onmouseenter:移上
                      this.style.background = 'gold'; // 从新上色
                 }
                 oLis[i].onmouseleave = function () { // 鼠标移上事件 function:鼠标事件 onmouseleave:移出
                      this.style.background = this.myBg; // 把移上时从新上的颜色 变更为之之前原本的颜色
                 }
                 oLis[i].onclick = function(){ // 鼠标移上事件 function:鼠标事件 onclick:点击
                      alert(`这是第${this.myIndex}行 背景颜色是${this.myBg}`); // 弹出警告框
                 }
            }
</script>
</body>