<!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. bzoj1997 [HNOI2010]平面图判定Plana

    bzoj1997 [HNOI2010]平面图判定Planar 链接 bzoj luogu 思路 好像有很多种方法过去.我只说2-sat 环上的边,要不在里面,要不在外边. 有的边是不能同时在里面的,可 ...

  2. tp5.1中的容器和facade的实现

    首先定义: 容器(Container)实现类的统一管理,确保对象实例的唯一性. 门面(Facade)为容器(Container)中的类提供了一个静态调用接口,相比于传统的静态方法调用, 带来了更好的可 ...

  3. yii 动态增加路由规则

    使用 UrlManager类的addRules方法. 如 $url->addRules([ 'zzz/<id:\d+>' => '/test/hi', ]); 这个规则必须在开 ...

  4. Vue-admin工作整理（一）：项目搭建

    1.首先要安装vue-cli 3.0以上版本,和git 该版本可以支持页面化快速创建: sudo npm install -g @vue/cli 安装完毕后查看vue版本信息:vue -V 2.安装好 ...

  5. 趋势：flex和grid使布局更简单

    前言:记不久前面试的时候,面试官问我平时用什么布局方式,我非常耿直的说 div+css,利用position,float等布局,这就是非常传统的布局方式,通常都要写比较多的css代码:前几天在知乎上看 ...

  6. Pandas 基础(15) - date_range 和 asfreq

    这一节是承接上一节的内容, 依然是基于时间的数据分析, 接下来带大家理解关于 date_range 的相关用法. 首先, 引入数据文件: import pandas as pd df = pd.rea ...

  7. Linux系统时间, 硬件BIOS时间的校准与同步

    #宿主机系统时间: date #宿主机时间校准方法: yum install -y ntpdate ntpdate -u ntp.api.bz #centos查看设置系统时区:(可能没有) cat / ...

  8. fiddler -- 一个强大的抓包工具

    一.fiddler常用功能: 1. Fiddler 是位于客户端和服务器端的http代理,也是目前最常用的http抓包工具之一.它能够记录客户端和服务器之间的所有http请求,可以针对特定的http请 ...

  9. Day 4 变量常量

    编辑语言的分类 编程语言,他是人与计算机沟通的一种介质 机器语言 计算机只认识0和1,为了和计算机沟通,你也得认识0和1 优点:执行效率快 缺点:普通人根本就写不了这种代码,开发效率低 汇编语言 他还 ...

  10. Nginx 常用配置

    Nginx的负载均衡方式 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight 指定轮询几率,weight和访问比率成正比,用于后端 ...