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 ...
随机推荐
- orm 复习
day70 2018-05-14 1. 内容回顾 1. ORM 1. ORM常用字段和属性 1. AutoField(primary_key=True) 2. CharField(max_length ...
- Java面向对象内存分析
title: Java面向对象内存分析 date: 2018-07-28 11:12:50 tags: JavaSE categories: - Java - JavaSE 一.Java虚拟机的内存区 ...
- selenium如何屏蔽谷歌浏览器弹出的通知
使用selenium访问新浪微博的时候 浏览器总会有个通知,需要点击 类似下面这样 下面使用chromeoptions来修改浏览器的设置 from selenium import webdrive ...
- 高阶函数 map、reduce、filter、sort 函数计算
map() 循环遍历,返回一个新数组 ,reduce()把结果继续和序列的下一个元素做累积计算 把一个字符串13579先变成Array--[1, 3, 5, 7, 9],再利用reduce()就可以写 ...
- Springboot使用alibaba的fastJson,@JSONField不起作用的问题
在Springboot中默认的JSON解析框架是jackson 今天引入alibaba的fastjson,使用@JSONField(serialize=false),让@RestController转 ...
- vue项目中使用插件将字符串装化为格式化的json数据(可伸缩)
插件地址:https://www.npmjs.com/package/vue-json-viewer 第一步:安装vue-json-viewer插件 $ npm install vue-json-vi ...
- oracle创建删除表空间
create [undo|temporary] tablespace orcp datafile|tempfile 'E:\orcle\oracleBaseDir\oradata\orcp\orcp. ...
- js如何实现类的继承
方法一:借助构造函数实现继承 这种方法的缺点:原型链上的东西并没有被继承. 方法二:借助原型链实现继承 这种方法的缺点:改变了一个实例对象,另一个实例对象也跟着改变,因为s1.__proto__ == ...
- css3选择器和伪类
元素选择子: * 任何元素 E 与E标签结合的任何元素 E F E的所有派生标签中,有F标签的元素 E > F 或者 E/F E的所有直接的拥有F标签的子类 E + F 所有具有F标签的元素,紧 ...
- STSdb数据库的实现使用类
STSdb 3.5是一个开源的key-value存储形式的数据库,它是用微软.net框架C#语言编写的.STSdb 3.5尤其使用于紧急任务或实时系统,如:股市交易,电子通信,实验室数据等,它的主要功 ...