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

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

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

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

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

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

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

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表格隔行变色</title>

   <style type="text/css">

       *{

           margin:0;padding: 0;

       }

       table{

           width:500px;

           position:relative;

           margin:100px auto;

           border-collapse:collapse;

           /*合并表格单一边框*/

           border:1px solid #d7d7d7;

       }

       thead tr{

           background-color:#ccc;

           height:30px;

       }

       table tr{

           text-align: center;

           height:30px;

       }

       .bg{

           background: #eee;

       }

 </style>

 </head>

 <body>

 <table  border=1>

     <thead>

         <tr>

             <td width="40">序号</td>

             <td width="100">前端单词</td>

             <td width="80">基本释义</td>

             <td width="50">长度</td>

             <td width="">补充</td>

         </tr>

     </thead>

     <tbody>

         <tr>

                    <td>1</td>

                    <td>select</td>

                    <td>选择</td>

                    <td>6</td>

                    <td>-</td>

              </tr>

              <tr>

                    <td>2</td>

                    <td>target</td>

                    <td>目标</td>

                    <td>6</td>

                    <td>-</td>

              </tr>

              <tr>

                    <td>3</td>

                    <td>input </td>

                    <td>输出</td>

                    <td>5</td>

                    <td>-</td>

              </tr>

              <tr>

                    <td>4</td>

                    <td>button</td>

                    <td>按钮</td>

                    <td>8</td>

                    <td>-</td>

              </tr>

              <tr>

                    <td>5</td>

                    <td>checkbox</td>

                    <td>复选框</td>

                    <td>8</td>

                    <td>-</td>

              </tr>

     </tbody>

 </table>

 <script>

     //1、获取tbody里面的所有的行

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

     //2、利用循环注册事件

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

         var bgc = function(e){this.className = 'bg';}

         trs[i].addEventListener('mouseover',bgc)

         trs[i].onmouseout = function(){

             this.className = '';

         }

     }

 </script>

 </body>

 </html>

显示效果：

当鼠标滑过时：

 当鼠标离开时：

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

JS实现表格隔行变色的更多相关文章

  1. js控制表格隔行变色

    只是加载时候隔行变一个颜色,鼠标滑动上去时候没有变化 <table width="800" border="0" cellpadding="0& ...

  2. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  3. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  4. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  5. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  6. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  7. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

随机推荐

  1. teach-es6

    ES6: ECMAScript6 js: 组成部分: ECMA DOM BOM ECMA是“European Computer Manufactures Association”的缩写,中文称欧洲计算 ...

  2. C++面试题整理（持续更新中）

    一. 内联函数和宏定义的区别 1.内联函数在运行时可调试,而宏定义不可以: 2.编译器会对内联函数的参数类型做安全检查或自动类型转换(同普通类型),而宏定义不会: 3.内联函数可以访问类的成员变量,而 ...

  3. 使用feign上传图片

    1.添加依赖,支持SpringEncoder <dependency> <groupId>io.github.openfeign.form</groupId> &l ...

  4. java暂停线程

    暂停线程 本节介绍两个被废弃的用于线程暂停和恢复的方法suspend().resume().主要探究废弃原因,强调线程的安全性.主要有两个原因 原因1: suspend().resume()使用不当, ...

  5. JAVA文件类工具

    FileUtil package cn.jiangzeyin.util.file; import org.springframework.util.Assert; import java.io.*; ...

  6. Wannafly挑战赛19:C. 多彩的树

    传送门 $k$的范围非常小, $O(n2^k)$求出状态最多为$S$的路径数, 然后容斥. #include <iostream> #include <sstream> #in ...

  7. Keepalived+Nginx+Tomcat 实现高可用Web集群

    https://www.jianshu.com/p/bc34f9101c5e Keepalived+Nginx+Tomcat 实现高可用Web集群 0.3912018.01.08 20:28:59字数 ...

  8. JSTL标签+El表达式把list集合数据展示到 JSP页面

    JSP页面 <%@ page import="cn.itcast.domain.User" %><%@ page import="java.util.L ...

  9. 常见Http访问错误小结

    4xx 客户端错误# 400 bad request 错误的请求 # 401 未携带身份信息 # 403 forbidden 权限不够 # 404 Not Found# 405 请求方式不允许 5xx ...

  10. Hadoop环境安装和集群创建

    虚拟机使用vmware,vmware可以直接百度下载安装 秘钥也能百度到 安装很简单 CentOS 7下载: 进入官网 https://www.centos.org/download/ 这里有三种 第 ...