JS实现隔行变色，鼠标移入高亮
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #698906 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #060606 }
span.s8 { color: #929151 }
span.s9 { color: #4a8a01 }
span.s10 { color: #ad42ef }
span.s11 { color: #698906 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }
<!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>
JS实现隔行变色，鼠标移入高亮的更多相关文章
- 隔行变色&&鼠标移入变色
<html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...
- JS---案例：表格隔行变色(鼠标划过背景色恢复)
案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...
- 使用webpack打包js文件(隔行变色案例)
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- js实现隔行变色-------Day40
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/31837367 就这样開始了自己的第二个项 ...
- JavaScript实例---表格隔行变色以及移入鼠标高亮
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- echarts饼图去除鼠标移入高亮
1:如果echarts的js文件为压缩版本,在编辑器打开去掉t.on("mouseover",c).on("mouseout",d)这一行,如果js文件为非压缩 ...
- jquery table的隔行变色 鼠标事件
一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...
- js form表单 鼠标移入弹出提示功能
JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...
- js实现隔行变色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 大众点评试题分析（C/C++）
1.main函数执行完毕,从栈中弹出操作函数 void fn1(void), fn2(void), fn3(void); int main() { atexit(fn3); atexit(fn1); ...
- Chap5：32– 34
32. 从 1 到 n 整数中 k (0,1, 2, 3, 4, 5, 6, 7, 8, 9)出现的次数. 时间 O(log10N) A. 当 K != 0 时: 以 n = 2014,K = 1 ...
- Codeforces Round #228 (Div. 1) B
B. Fox and Minimal path time limit per test 1 second memory limit per test 256 megabytes input stand ...
- Java分布式Socket监控项目思考
内容说明 一项课程作业Java编写Socket长连接监控分布式终端,并将终端状态写入数据库供前端查询 基础:c++/Posix/APUE/Mysql&sqlite 核心内容:Socket/线程 ...
- 一千行MySQL学习笔记
以下为本人当年初学MySQL时做的笔记,也从那时起没再更新过,但还是囊括了基本的知识点,有时还翻出来查查.是不是干货,就看亲们了~ 如果哪天笔记有更新了,我还是会更新该文章滴,其实笔记已经放到了Git ...
- 使用linux的nc来进行文件的传输
NAME nc - arbitrary TCP and UDP connections and listensSYNOPSIS nc [-46DdhklnrStUuvz] [-i interv ...
- jquery的扩展之extend函数
1.$.extend()使用 作用:扩展全局的函数 $.extend({ sayHellow:function(pram){ alert(pram+"hellow"); } }) ...
- 三天没有写题了，罪过！--Hash Table Start
(1)Island Perimeter 解题思路: 在矩阵上循环并记录岛(1)的个数;如果当前节点是岛,则检查其是否具有任何右邻居或下邻居,有的话邻居计数加1 ;岛的周长结果为islands * 4 ...
- SQL SERVER连接、合并查询
----创建测试表MyStudentInfoCREATE table MyStudentInfo( Id int not null primary key, Name varchar(16), ...
- 循序渐进Python3（六） -- 初识内置变量、反射、递归
#python用下划线作为变量前缀和后缀指定特殊变量.稍后我们会发现, #对于程序来说,其中的有些变量是非常有用的,而其他的则是未知或者无用的. #我们总结一下Python中下划线的特殊用法 ...