表格隔行换色效果（js）

jasmine 莉

于 2021-08-13 20:59:48 发布

阅读量199

点赞数

分类专栏：前端文章标签： html5 css javascript

本文链接：https://blog.youkuaiyun.com/Cat_LIKE_Mouse/article/details/119683821

版权

前端专栏收录该内容

46 篇文章

订阅专栏

本文介绍如何通过JavaScript实现HTML表格中行在鼠标悬停时改变背景色的效果。首先设置HTML和CSS样式，然后通过JavaScript获取tbody内的所有tr元素，使用for循环为每个tr添加onmouseover和onmouseout事件监听器。当鼠标滑过tr时，添加bg类以改变背景色；鼠标离开时，移除该类以恢复原样。这种方法能直观地突出显示用户正在查看的表格行。

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

当我们鼠标滑过表格的时候，表格里面的行会发生颜色的变化

先设置html 和css样式（这里就不展示了）

我们先获取tbody里面的所有的tr对象

var tr = document.querySelector('tbody').querySelectorAll('tr')

然后利用循环获取到每一个rt对象

.bg{
            background: pink;
        }

for (var i = 0; i <= tr.length; i++) {         //循环获取每一个tr对象
            tr[i].onmouseover = function(){      //创建鼠标滑过
                console.log(1);    
                this.className='bg'                //当鼠标滑过 给tr设置class名 设为bg
            }
            tr[i].onmouseout = function(){          //设置鼠标离开事件
                this.className=''                    //当鼠标离开，清除tr的样式
            }        
 }