JS如何实现表格隔行变色

这篇文章主要为大家展示了"JS如何实现表格隔行变色"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"JS如何实现表格隔行变色"这篇文章吧。

具体内容如下

用到的鼠标事件：（1）鼠标经过 onmouseover；（2）鼠标离开 onmouseout

核心思路：鼠标经过 tr 行的时候，当前行会改变背景颜色，鼠标离开的时候去掉背景颜色。

注意：第一行（thead 里面的行）不需要变换颜色，改变的是 tbody 里面的行。

1、获取元素，获取的是 tbody里面的行。

2、循环注册绑定事件，将 tbody 里面全部的行都得到，然后全部都注册鼠标经过和离开事件。

3、所有行绑定鼠标经过事件，鼠标经过当前元素（this）改变颜色；

4、所有行绑定鼠标离开事件，鼠标离开当前元素（this）没有颜色；

代码如下：

          
    
        
            
序号
            
前端单词
            
基本释义
            
长度
            
补充
        
    
    
        
                   
1
                   
select
                   
选择
                   
6
                   
-
             
             
                   
2
                   
target
                   
目标
                   
6
                   
-
             
             
                   
3
                   
input 
                   
输出
                   
5
                   
-
             
             
                   
4
                   
button
                   
按钮
                   
8
                   
-
             
             
                   
5
                   
checkbox
                   
复选框
                   
8
                   
-
             
    

显示效果：

当鼠标滑过时：

当鼠标离开时：

当然这个效果使用 CSS的 :hover 可以非常简单的实现（tbody tr:hover{background: #eee;}），但是在这个例子中主要想体现的是使用JS事件和排他思想实现的效果。

以上是"JS如何实现表格隔行变色"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！