JQuery案例一:实现表格隔行换色
<!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案例一:实现表格隔行换色的更多相关文章
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- jQuery应用实例2:表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- JS应用实例4:表格隔行换色
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- javascript 表格隔行换色
用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
- jQuery表格隔行换色和全选的实现
1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...
随机推荐
- Git操作手册(开发人员)
一.git信息配置 1.1配置git账号信息 Window ->Preferences -> Team -> Git -> Configuration,在点击AddEntry… ...
- 【转载】系统吞吐量(TPS)、用户并发量、性能测试概念和公式
系统吞度量要素 一个系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联.单个reqeust 对CPU消耗越高,外部系统接口.IO影响速度越慢,系统吞吐能力越低,反之越高 ...
- Android ANR(应用无响应)解决分析【转】
本文转载自:https://blog.csdn.net/u014630142/article/details/81709459 来自: http://blog.csdn.net/tjy1985/art ...
- Linux SSH 基于密钥交换的自动登录原理简介及配置说明
协商交互过程 1.客户端向目标服务器发送登录请求.在SSH 服务启用了证书验证登录方式后,会优先通过证书验证方式进行登录验证. 2.目标服务器根据 SSH 服务配置,在用户对应目录及文件中读取到有效的 ...
- java基础--集合框架的认识
一.集合框架 对于不知道存储数量和更复杂的方式存储对象用集合框架. 其中有几个常用的接口和实现类:Collection父接口.List接口,Set接口,Map接口, ArrayList实现类.Link ...
- ArcGIS Pro开发Web3D应用(1)——环境搭建与初始实例
1.搭建环境 1.1 ArcGIS Web3D软件环境 ArcGIS Pro 2.0(必须) ArcGIS for Enterprise 10.5.1 (从10.5开始称呼为Enterprise)包括 ...
- 微观:心流,宏观:ikigai
ikigai: 心流:在心理学中是一种某者在专注进行某行为时所表现的心理状态.如艺术家在创作时所表现的心理状态.某者在此状态时,通常不愿被打扰,即抗拒中断.定义是一种将个人精神力完全投注在某种活动上的 ...
- Autofac IOC框架
ASP.NET Core自带了一个轻量级的IOC容器 但是只提供了最基本的AddXXX方法来绑定实例关系 需要一个一个添加 可以使用其他IOC容器来替换内置的 ABP自带Castl ...
- 下载 youtube 油管的视频
以前也曾经用个工具下过,好像是浏览器插件. 但是到底是什么也记不起来了,删没删除,怎么删除的,全都没有记忆了. 唉,无论多么小的事,只有记到本子或者网络上,才能记得住啊. 所以,这回发现了 youtu ...
- LeetCode--027--移除元素(java)
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...