<!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. 复旦大学2018--2019学年第一学期（18级）高等代数I期末考试第七大题解答

    七.(本题10分)  设 $V$ 为 $n$ 维线性空间, $\varphi,\psi$ 是 $V$ 上的线性变换, 满足 $\varphi\psi=\varphi$. 证明: $\mathrm{Ke ...

  2. Bigger-Mai 养成计划，前端基础学习之HTML

    HTML 超文本标记语言(Hyper Text Markup Language) 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ...

  3. Springboot的异常处理与自定义异常

    园友们好,元旦很快就到来了,提前祝各位园友们元旦快乐,今天给大家分享一个工作中必用一个知识点,就是使用枚举构建自定义异常并应用于springboot的异常处理器.开始之前我先把这个案例的结构大致说明一 ...

  4. MapReduce实现PageRank算法（稀疏图法）

    前言 本文用Python编写代码,并通过hadoop streaming框架运行. 算法思想 下图是一个网络: 考虑转移矩阵是一个很多的稀疏矩阵,我们可以用稀疏矩阵的形式表示,我们把web图中的每一个 ...

  5. Kotlin 继承

    Kotlin 中所有类都继承该 Any 类,它是所有类的超类,对于没有超类型声明的类是默认超类: class Example // 从 Any 隐式继承 Any 默认提供了三个函数: equals() ...

  6. HDU 5299 Circles Game

    HDU 5299 思路: 圆扫描线+树上删边博弈 圆扫描线有以下四种情况,用set维护扫描线与圆的交点,重载小于号 代码: #pragma GCC optimize(2) #pragma GCC op ...

  7. jmeter的安装和配置

    jmeter环境配置 Java 8 安装 正常安装,一路默认就好,记住安装路径,配置环境变量时用得到.默认安装路径:C:\Program Files\Java\jdk1.8.0_91. 安装好之后会有 ...

  8. archlinux 装完系统连接 wifi 网络

    查看 IP 地址 ip a 注:没有看到 IP 地址,确认没有网络.或者也可以使用命令 ping www.baidu.com 测试是否有网络. 执行该指令: sudo systemctl start ...

  9. UML作业第三次

    一.学习小结 类之间的关系通过符号定义 : 使用.. 来代替 -- 可以得到点 线. 例如: @startuml Class01 <|-- Class02 Class03 *-- Class04 ...

  10. Monkey工具

    Android自动化测试方法,对其中的一些工具.方法和框架做了一些简单的整理,其中包括android测试框架.CTS.Monkey. Monkeyrunner.benchmark.其它test too ...