文档章节

纯JS代码实现隔行变色鼠标移入高亮

码农般的学良
 码农般的学良
发布于 2016/11/23 11:21
字数 290
阅读 72
收藏 0
点赞 0
评论 0

在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果,废话不多说了,具体代码如下所示:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#table {

width: 400px;

border-collapse: collapse;

}

</style>

</head>

<body>

<table id="table" border="1">

<thead>

<td>ID</td>

<td>姓名</td>

<td>年龄</td>

</thead>

<tbody>

<tr>

<td>1</td>

<td>黄艺</td>

<td>20</td>

</tr>

<tr>

<td>2</td>

<td>张三</td>

<td>21</td>

</tr>

<tr>

<td>3</td>

<td>李四</td>

<td>22</td>

</tr>

<tr>

<td>4</td>

<td>网无</td>

<td>23</td>

</tr>

</tbody>

</table>

</body>

<script type="text/javascript">

// 实现隔行变色,鼠标移入高亮

var table = document.getElementById("table");

var oldColor = "";//声明一个变量,保存表格原来的颜色

for(var i = 0; i < table.tBodies[0].rows.length; i++) {

//使用判断实现隔行变色

if(i % 2 == 0) {

table.tBodies[0].rows[i].style.backgroundColor = "gray";

} else {

table.tBodies[0].rows[i].style.backgroundColor = "#ccc";

}

//实现鼠标移入高亮

table.tBodies[0].rows[i].onmouseover = function() {

oldColor = this.style.backgroundColor;

this.style.backgroundColor = "red";

}

//实现鼠标移出变回原来的颜色

table.tBodies[0].rows[i].onmouseout = function() {

this.style.backgroundColor = oldColor;

}

}

</script>

</html>

© 著作权归作者所有

共有 人打赏支持
码农般的学良
粉丝 1
博文 20
码字总数 23265
作品 0
通州
Jquery真的不难~第三回 如何改变HTML标签的样式

 对于如何修饰HTML标签,这对于JS来说,可以通过setAttribute来设置标签的属性,通过getAttribute来得到标签的属性,而在JQ中当然也可以实现类似的功能,方法上肯定比JS要简化多了...

mcy247 ⋅ 2017/12/06 ⋅ 0

当鼠标聚焦时输入框变色(focus事件实例)

当鼠标聚焦时输入框变色 css相关,鼠标点击输入域后出现有颜色的边框 原理:css伪类之input输入框鼠标点击边框变色效果 伪类元素的使用::focus 一:当输入框获得焦点时,改变它的背景色 效果...

祈澈姑娘 ⋅ 05/11 ⋅ 0

JavaWeb03-HTML篇笔记(五)

1.1 案例四:使用JS完成后台数据展示的隔行换色的表格:1.1.1 需求: 在后台展示数据的页面上,通常使用表格标签进行数据的展示.没有背景的表格比较难看的,可以使用JS控制表格的隔行换色. 1...

我是小谷粒 ⋅ 05/04 ⋅ 0

JS/jquery实现鼠标事件控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一...

GavinHsueh ⋅ 05/21 ⋅ 0

JavaScript实现爆炸碎片的 图片切换 效果

说明 和大家分享一个看上去很酷的效果,先来看效果图吧! 解释 实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div...

FEWY ⋅ 05/14 ⋅ 0

jquery 隔行变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met......

freedonn ⋅ 2014/04/15 ⋅ 0

【翻译】Flask大型教程|第二十章:加点JavaScript魔法

本文翻译自The Flask Mega-Tutorial Part XX: Some JavaScript Magic 这是Flask Mega-Tutorial系列的第二十部分,我将添加一个功能,当你将鼠标悬停在用户的昵称上时,会弹出一个漂亮的窗口。...

一进制 ⋅ 04/18 ⋅ 0

简单的css js控制table隔行变色

(1)用expression 鼠标滑过变色: <style type="text/css"> <!-- table { background-color:#000000; cursor:hand; width:100%; } td { onmouseover: expression(onmouseover=function (){t......

qhaiyan ⋅ 2015/10/14 ⋅ 0

JS/jquery实现鼠标控制页面元素显隐

对于鼠标指针的移入和移出,就涉及到了mouseover、mouseout和mouseleave事件。 mouseover:当鼠标指针移到目标元素时触发该事件; mouseout:当鼠标指针移出目标元素或其子元素时,都会触发该...

GavinHsueh ⋅ 05/21 ⋅ 0

【BS学习】精通CSS.DIV网页样式与布局总结

第一课 初探CSS 1.1 CSS的概念 CSS:层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 标记的概念 HTML的缺陷 CSS的引入 1.2使用CSS控制页面 1.2.1行内样式 ...

yym15732626210 ⋅ 02/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、一般模式下复制粘贴剪切

VIM Vim 是 UNIX 文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff),语法高亮,全面的帮助系统,本地脚本(Vimscript),和便于选择的...

蛋黄Yolks ⋅ 17分钟前 ⋅ 0

springboot+mockito测试controller层遇到的问题

使用MockitoJUnitRunner测试的一个例子,原来报错无法找到bean, 类似的异常如下:createBeanError..... 原因:是因为@Runwith使用了SpringRunner,应该修改为MockitoJUnitRunner 代码如下: ...

writeademo ⋅ 29分钟前 ⋅ 0

关于“幂等”操作

一个幂等(idempotent)操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同. 开发中, 我们经常考虑幂等操作的场景有“接口调用”、“MQ消费”、“自动任务”等 接口调用, 可能出现...

零二一七 ⋅ 36分钟前 ⋅ 0

Dubbo服务服务暴露之ProxyFactory Invoker

Dubbo服务暴露过程中有涉及到调用ProxyFactory 中方法获取Invoker对象的过程,现在我们来深究下源码,来看下这个过程是在做些什么,返回的Invoker 对象是什么,我们来看一下代码的切入点: ...

哲别0 ⋅ 51分钟前 ⋅ 0

GP两种连接方式性能测试

GP两种连接方式性能测试 Pivotal import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; public class GPQueryStrin......

仔仔1993 ⋅ 55分钟前 ⋅ 0

jsonrpc-4j代码解析

解析文件 AutoJsonRpcServiceImplExporter JsonServiceExporter AutoJsonRpcServiceImplExporter 路径:com.googlecode.jsonrpc4j.spring.AutoJsonRpcServiceImplExporter AutoJsonRpcServi......

郭恩洲_OSC博客 ⋅ 今天 ⋅ 0

百度搜索

from selenium import webdriver import time brower=webdriver.Firefox() brower.get('http://www.baidu.com') input=brower.find_element_by_id('kw') input.send_keys('中南大学') time.s......

南桥北木 ⋅ 今天 ⋅ 0

tomcat 日志记录器

1、日志记录器是记录消息的组件 日志记录器需要与某个servlet 容器相关联 2、Logger 接口 共定义了5种日志级别:FATAL、ERROR、WARNING、INFORMATION、DEBUGGER setVerbosity 设置级别 setC...

职业搬砖20年 ⋅ 今天 ⋅ 0

Thrift RPC实战(三) Thrift序列化机制

1.Thrift基础架构 Thrift是一个客户端和服务端的架构体系,数据通过socket传输; 具有自己内部定义的传输协议规范(TProtocol)和传输数据标准(TTransports); 通过IDL脚本对传输数据的数据结构...

lemonLove ⋅ 今天 ⋅ 0

网站建设就要像2018世界杯的俄罗斯队大杀四方[图]

今天心情不错,因为昨天晚上观看了世界杯比赛,尤其是对俄罗斯队的大杀四方感到十分霸气侧漏啊,因此我联想到了自己的博客网站,我的博客是去年年底上线的,一直想建设一个关于读书和读后感作...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部