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实现隔行变色，鼠标移入高亮的更多相关文章

  1. 隔行变色&&鼠标移入变色

    <html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...

  2. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  3. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  4. js实现隔行变色-------Day40

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/31837367 就这样開始了自己的第二个项 ...

  5. JavaScript实例---表格隔行变色以及移入鼠标高亮

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  6. echarts饼图去除鼠标移入高亮

    1:如果echarts的js文件为压缩版本,在编辑器打开去掉t.on("mouseover",c).on("mouseout",d)这一行,如果js文件为非压缩 ...

  7. jquery table的隔行变色 鼠标事件

    一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...

  8. js form表单 鼠标移入弹出提示功能

    JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...

  9. js实现隔行变色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. SG函数模板（转）

    ps:sg[i]为0表示i节点先手必败. 首先定义mex(minimal excludant)运算,这是施加于一个集合的运算,表示最小的不属于这个集合的非负整数.例如mex{0,1,2,4}=3.me ...

  2. 慕课网-安卓工程师初养成-5-4 使用 Eclipse 调试程序

    来源:http://www.imooc.com/video/1627 IDE断点调试功能 比如 之前的程序,写错了,变成如下 package com.imooc; import java.util.S ...

  3. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  4. swift 当协议遇见了泛型

    由于泛型比较简单,并没有单独拿出来介绍!我们在定义函数的时候,有时候只是由于参数或者返回值类型不同,而具体的实现过程是一模一样的,这个时候我们就可以定义泛型函数而使可以传入不同的参数类型: func ...

  5. netstat大量time_wait连接

    http://chembo.iteye.com/blog/1503770 http://www.2cto.com/os/201007/54067.html http://blog.csdn.net/d ...

  6. Linux防火墙

    9.1 认识防火墙   只要能够分析与过滤进出我们管理之网域的封包数据, 就可以称为防火墙. 硬件防火墙 由厂商设计好的主机硬件, 这部硬件防火墙内的操作系统主要以提供封包数据的过滤机制为主,并将其他 ...

  7. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

  8. gitlab 配置

    一.Gitlab的使用 具体步骤: 1.打开 Git Bash,输入~ssh -keygen  然后一直回车,直至出现图片上的内容 1) 2) 2.然后自动生成.ssh文件夹,双击文件夹 1) 2) ...

  9. window date type

    Most string operations can use the same logic for Unicode and for Windows code pages. The only diffe ...

  10. java时间相减(转载)

    package com.jie.java.phone; import java.text.ParseException; import java.text.SimpleDateFormat; impo ...