网站首页前端文档正文

JS实现表格隔行变色_javascript技巧

作者：Cloud% 更新时间： 2022-05-06 前端文档

本文实例为大家分享了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 -

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

显示效果：

当鼠标滑过时：

当鼠标离开时：

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

原文链接：https://www.cnblogs.com/nyw1983/p/11925281.html

上一篇：elasticsaerch的restfulHttp查询封装，
下一篇：JS实现简单Tab栏切换案例_javascript技巧

网站首页 前端文档 正文

JS实现表格隔行变色_javascript技巧

相关推荐

网站首页前端文档正文