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

在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于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>

以上所述是小编给大家介绍的纯JS代码实现隔行变色鼠标移入高亮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js隔行变色
鼠标移动高亮
javascript隔行变色、javascript 高亮显示、javascript 语法高亮、javascript 代码高亮、vim javascript 高亮,以便于您获取更多的相关知识。

时间: 2024-02-19 11:00:37

纯JS代码实现隔行变色鼠标移入高亮_javascript技巧的相关文章

JS实现超简单的鼠标拖动效果_javascript技巧

本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo

纯JS实现本地图片预览的方法_javascript技巧

本文实例讲述了纯JS实现本地图片预览的方法.分享给大家供大家参考.具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的.就拿自己以前写的写了一个.代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容.本机浏览器基本都支持(IE,FF,Chrome) index.html如下: <html> <head> <title>Test</title> <script type="text/javascript

浏览器检测JS代码(兼容目前各大主流浏览器)_javascript技巧

本文实例介绍了JS代码实现浏览器检测,分享给大家供大家参考,具体内容如下 var BrowserMatch = { init: function () { this.browser = this.getBrowser().browser || "An Unknown Browser"; this.version = this.getBrowser().version || "An Unknown Version"; this.OS = this.getOS() ||

js代码实现无缝滚动(文字和图片)_javascript技巧

一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s

纯js模拟div层弹性运动的方法_javascript技巧

本文实例讲述了纯js模拟div层弹性运动的方法.分享给大家供大家参考.具体如下: 特性: 1. 支持各项常数自定义 2. 理论支持所有元素,只需修改style.width,你懂得 3. 已知支持浏览器:chrome/firefox/IE7.8.9 <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script type="te

js代码验证手机号码和电话号码是否合法_javascript技巧

这篇文章主要介绍了js代码验证手机号码和电话号码是否合法,手机号码和电话号码在某些网站都是必填项,为了提高用户体验度,一般要进行合法性校验的,具体代码如下:function Checkreg(){ .....   function Checkreg(){ //验证电话号码手机号码,包含 , 号段 if(document.form.phone.value==""&&document.form.UserMobile.value==""){ alert(&

纯javascript代码实现计算器功能(三种方法)_javascript技巧

今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

图片自动缩小的js代码,用以防止图片撑破页面_javascript技巧

JS代码(随便放哪里): <script language="JavaScript">  <!--  var flag=false;  function DrawImage(ImgD){  var image=new Image();  image.src=http://www.jb51.net/htmldata/2006-01-08/ImgD.src;  if(image.width>0 && image.height>0){    fl

使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享_javascript技巧

CSS+JavaScript实现原理: 创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的div,这个时候它就不会被满屏div遮盖.在默认状态下这两个div的display属性值是none.当点击相应的按钮可以更改他们的display属性值. <!DOCTYPE html> <html> <head&g