JS实现表格隔行变色
用到的鼠标事件：（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实现表格隔行变色的更多相关文章
- js控制表格隔行变色
只是加载时候隔行变一个颜色,鼠标滑动上去时候没有变化 <table width="800" border="0" cellpadding="0& ...
- 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
随机推荐
- 【Linux开发】linux设备驱动归纳总结（四）：5.多处理器下的竞态和并发
linux设备驱动归纳总结(四):5.多处理器下的竞态和并发 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- C# 重写WndProc
重写WndProc方法来处理 Windows 消息 处理 Windows 消息. 在开发winForm时,常常要处理Windows消息,可以重写WndProc来实现.常见代码如下: using Sys ...
- hue改下载行数
参考: https://blog.csdn.net/lingbo229/article/details/85991230 修改hue所在机器的默认配置后,重启hue即可 find / -name be ...
- Python3图片处理头像
一. 简介: Python3图片处理头像右上角类似QQ,微信右上角未读信息效果,其实没有实质作用,只是简单练习. 1. 环境: python3.5 random模块:生成随机数 PIL模块:图像处理模 ...
- 啃掉Hadoop系列笔记(01)-Hadoop框架的大数据生态
一.Hadoop是什么 1)Hadoop是一个由Apache基金会所开发的分布式系统基础架构 2)主要解决,海量数据的存储和海量数据的分析计算问题. 3)广义上来说,HADOOP通常是指一个更广泛的概 ...
- spring配置文件拆分策略及方法
一.拆分策略 如果一个开发人员负责一个模块,我们采用公用配置(包括数据源.事务等)+每个系统模块一个单独配置文件(包括Dao.Service.Web控制器)的形式 如果是按照分层进行的分工,我们采用公 ...
- sql实现同时向主表和子表插入数据方法
使用sql语句实现同时向主表和子表插入数据方法: Oracle: -- oracle创建sequence create sequence SEQ_test minvalue 1 maxvalue 99 ...
- Unity VR-播放demo模型后无法移动视角
资源源于:小意思VR 唉..可怜一下自己,这个问题百度google也不知道怎么搜,没搜出来,在群里问出来的. 当时感觉自己Unity有问题..(就是因为自己啥也不会看不懂) 按右键.或者WASD视角都 ...
- 如何让 node 运行 es6 模块文件，及其原理
如何让 node 运行 es6 模块文件,及其原理 最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机 ...
- 分布式---CAP和BASE理论
3.CAP 分布式系统不可能同时满足一致性(C:Consistence),可用性(A:Avaliability)和分区容忍性(P:Partition Tolerance),最多只能同时满足其中的两 ...