<!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. Codeforces Round #503 (by SIS, Div. 2)

    连接:http://codeforces.com/contest/1020 C.Elections 题型:你们说水题就水题吧...我没有做出来...get到了新的思路,不虚.好像还有用三分做的? KN ...

  2. springBoot整合jpa

    https://blog.csdn.net/qq_35180973/article/details/82316438 总体来讲只是在service调用dao的时候用接口代替dao继承CrudRepos ...

  3. Web 端异步下载文件

    Web 端异步下载文件 实现文件异步下载: 在服务端无法返回文件,或发生异常时给予提示. JavaScript: 服务端返回的JSON对象形如: { code:200, msg:'下载成功|未找到指定 ...

  4. flask No such command "init-db".

    在Daily目录下,使用cmd窗口执行,不要使用IDE的命令行 set FLASK_APP=DLY set FLASK_ENV=development flask init_app

  5. JQuery-FullCalendar 多数据源实现日程展示

    背景 本次需求:实现在一个以月为界面的日历上展示每天发生的事件. 1.每天的事件有多个类型,不同类型的事件使用不同背景色标注,展示为某个类型事件的统计,比如: 会议(6) 2.点击某一天可以查询改天所 ...

  6. C语言-第6次作业

    1.本章学习总结 1.1思维导图 1.2 本章学习体会 学习感受:先是接触到网络工程导论的建立文件的方式,觉得很方便很好用,而后直接从代码的层面建立文件,觉得很新奇,更加方便,随着大作业的一步一步升级 ...

  7. jquery延迟加载（懒加载）插件

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. JAVA程序错误总结

    NoSuchMethodError:main 出错原因:找不到main方法,应该是main方法书写有误. 解决方案:检查public static void main(String [] args){ ...

  9. webpack dllPlugin使用（基于vue-cli webpack模板）

    由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...

  10. [python]Python代码安全分析工具(Bandit)

    简介: Bandit是一款Python源码分析框架,可用于Python代码的安全性分析.Bandit使用标准库中的ast模块,将Python源码解析成Python语法节点构成的树.Bandit允许用户 ...