用到的鼠标事件:(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. 【Linux开发】linux设备驱动归纳总结(三):1.字符型设备之设备申请

    linux设备驱动归纳总结(三):1.字符型设备之设备申请 操作系统:Ubunru 10.04 实验平台:S3C2440 + linux2.6.29内核 注:在今后驱动程序的学习中经常需要查看内核源代 ...

  2. 【linux杂谈】遇到REMOTE HOST IDENTIFICATION HAS CHANGED怎么办?

    今日遇到如下问题: 警告的大概意思就是,主机密钥发生变更,并提示安全风险(可能存在中间人攻击) 但是事实是,这是因为我重装系统之后遇到的问题.重装系统后,指纹当然会发生变化了...在Xshell实验中 ...

  3. [转帖]MySQL5.7.20编译安装

    MySQL5.7.20编译安装 尝试一下 想着 我在arm上面最终安装失败了. https://www.cnblogs.com/shengdimaya/p/8027507.html 1:官网下载sou ...

  4. 以石子合并为例的区间DP

    区间DP,是一类具有较为固定解法的DP,一般的思路都是: first.初始化区间长度为1的情况(一般区间长度为1的较易于初始化) second. for(枚举区间长度2~n){ for(枚举左端点){ ...

  5. 【扩展GCD】荒岛野人

    题目 [题目描述] 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,-,M.岛上住着N个野人,一开始依次住在山洞C1,C2,-,CN中,以后每年,第i个野人会沿顺时针 ...

  6. composer命令介绍之install和update及其区别

    composer 是 php 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们. 然而,对于如何『安装他们』,新手可能并不清楚.网上的答案有的说 composer in ...

  7. linux基础命令<二>

    1.关机 init 0   poweroff   halt  shutdown –h   now 2.重启 init 6   reboot  shutdown –r now 3.查询都有那些用户在系统 ...

  8. 引入DDT

    一.大致介绍: DDT-Data Driven Test 是Python的第三方库,提供了创建数据驱动的测试,在线安装为:pip install ddt @data 表示元祖的列表数据 @unpack ...

  9. redis 学习(5)-- 列表类型

    redis 学习(5)-- 列表类型 列表特点 有序.可以重复.左右两边插入弹出 索引相关知识 索引从左往右,从0开始逐个增大 0 1 2 3 4 5 索引从右往左,从-1开始逐个减小 -6 -5 - ...

  10. [Next] 五.next自定义内容

    自定义 head 这是默认的 head 这样的 head 并不能满足我们的需求.next 公开了一个内置组件,用于将元素追加到<head>标签的.我们可以通过这个自定义 head 新建 c ...