<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>使用JQ完成表格隔行换色</title>

		<script src="js/jquery.min.js"></script>

		<script>

			$(function() {

				$("tbody tr:odd").css("background-color","aquamarine");

				$("tbody tr:even").css("background-color","bisque");

				var tb = $("tbody tr");

				var oldColor;

				for(var i=0;i<tb.length;i++) {

					//alert(oldColor);

					$("tbody tr")[i].onmouseover = function() {

						oldColor = this.style.backgroundColor;

						this.style.backgroundColor = "yellow";

					}

					$("tbody tr")[i].onmouseout = function() {

						this.style.backgroundColor = oldColor;

					}

				}

			});

		</script>

	</head>

	<body>

		<table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">

			<thead>

				<tr>

					<th>编号</th><th>姓名</th><th>年龄</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>1</td><td>张三</td><td>12</td>

				</tr>

				<tr>

					<td>2</td><td>李四</td><td>22</td>

				</tr>

				<tr>

					<td>3</td><td>王五</td><td>13</td>

				</tr>

				<tr>

					<td>4</td><td>马六</td><td>14</td>

				</tr>

				<tr>

					<td>5</td><td>伍六七</td><td>17</td>

				</tr>

				<tr>

					<td>6</td><td>梅花十三</td><td>17</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>

疑问：为什么this.style.backgroundColor = oldColor中的this不能用$("tbody tr")[i]代替？？

JQuery案例一：实现表格隔行换色的更多相关文章

  1. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  2. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  3. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  4. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  5. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  8. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  9. jQuery表格隔行换色和全选的实现

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

随机推荐

  1. 如何加速GitHub访问速度

    http://tool.chinaz.com/网站中填入assets-cdn.github.com选取响应最小的ip,将ip.域名填入到C:\Windows\System32\drivers\etc下 ...

  2. 详解Bootstrap实现基本布局的方法

    看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用bootstrap教程实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面我们先创建一个基本的 HTML 模板 ...

  3. elasticsearch_.net_client_nest2.x_到_5.x常用方法属性差异

    目录: Elasticsearch .net client NEST 5.x 使用总结 elasticsearch_.net_client_nest2.x_到_5.x常用方法属性差异 Elastics ...

  4. Spring Boot 线程池

    参考 SpringBoot 线程池 程序猿DD-Spring Boot使用@Async实现异步调用:自定义线程池 如何优雅的使用和理解线程池 Spring Boot线程池的使用心得 博客园-Sprin ...

  5. StringBuffer的delete方法与deleteCharAt方法的区别。

    delete方法与deleteCharAt两个方法都是用来删除StringBuffer字符串指定索引字符的方法, delete(int  begin,int  end)有两个参数,使用时删除索引从be ...

  6. vue 学习笔记（一）

    对于 vue 官网给的教程由浅及深,非常容易上手.我之前有过 react 项目开发经验,对 webpack 打包,脚手架这一类的东西并不陌生.所以也是我上手比较快的原因吧.简单将我在学习 vue 中遇 ...

  7. asp.net 虹软 人脸识别 实现刷脸住宿、刷脸签到、刷脸进入等

    先看看效果图,我把demo改成自动运行了,暂时借用别人的图片: 最左侧的大图为选择上传的, 中间的小图是大图的脸, 右侧的大图是人脸文件夹中已经存在的,并且相似度较高的一张脸,也就是比对的结果. 先记 ...

  8. CMD命令：不是内部或者外部命令也不是可运行的程序或批处理文件

    [本文转自:https://blog.csdn.net/l_mloveforever/article/details/79513681] 前言:   相信有很多小伙伴都比较喜欢使用Command命令来 ...

  9. node中 path.resolve 和path.join的区别

    path.resolve('a','b','c') 返回a/b/c path.resolve理论上总是以前一个路径作为基础路径,然后匹配当前路径,当前路径会有三种情况根目录(/),当前目录(./),上 ...

  10. inconfont的使用

    iconfont 进入阿里的矢量图标库,进入到我的项目(图标库)中,可以看到如下页面 根据不同的使用方式(Unicode.Font class.Symbol)可将对应文件下载至本地或直接在项目中引入 ...