JQ表格隔行换色
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} ul {
list-style: none;
border: 1px solid #5bc0de;
width: 600px;
margin: 0 auto;
padding: 0px;
} li {
padding: 10px 30px;
cursor: pointer;
} .c1 { /*奇数行颜色*/
background-color: #5bc0de;
} .c2 { /*偶数颜色*/
background-color: #f7e1b5;
} .c3 { /*移入颜色*/
background-color: #999;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>A</li>
<li>B</li>
<li>A</li>
<li>B</li>
<li>A</li>
<li>B</li>
</ul>
<script type="text/javascript">
$("li:even").addClass("c2");
$("li:odd").addClass("c1");
</script>
JQ :even选择器代表着选择偶数行
JQ :odd 代表选择奇数行
JQ表格隔行换色的更多相关文章
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
- JQuery案例一：实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery应用实例2：表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- JS应用实例4：表格隔行换色
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
- javascript 表格隔行换色
用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
随机推荐
- 设计模式之过滤器模式——Java语言描述
过滤器模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来 实现 创建一个Person对象.Criteria 接口和实现了该接口的实体类,来过滤 Person 对象的列 ...
- 原创分享！SharePoint母版页修改（实战）
分享人:广州华软 极简 一. 前言 SharePoint网站创建时,便自带一份母版页,可由开发人员重新自定义一份母版页,关于如何转换成母版页,由于之前已经讲述过,此篇便不再赘述了. 若自定义母版页,你 ...
- 抽象类（abstract class）与接口（interface）的异同
抽象类:如果一个类中包含抽象方法,那么这个类就是抽象类.在Java语言中,可以通过把类或类中的某些方法声明为abstract(abstract只能修饰类或方法,不能修饰属性)来表示一个类是抽象类. 接 ...
- centos6.7 配置Elasticsearch
Elasticsearch(以下简称ES),是一款开源的全文搜索引擎,获得了广泛的应用.这篇博客将介绍在centos6.7上如何配置ES. 一.安装JAVA环境 centos默认安装了JAVA环境,首 ...
- [Abp 源码分析]零、文章目录
0.系列文章目录 一.Abp 框架启动流程分析 二.模块系统 三.依赖注入 四.模块配置 五.系统设置 六.工作单元的实现 七.仓储与 Entity Framework Core 八.缓存管理 九.事 ...
- 解决关于：Oracle数据库 插入数据中文乱码 显示问号？？？
问题: oracle数据库,通过接口插入的中文数据乱码,中文变成了问号??? 解决方案: 计算机=>属性=>高级系统设置=>环境变量=>新建 变量名:NLS_LANG 值:SI ...
- .NET Core 2.2 新增部分功能使用尝鲜
前言 美国当地时间12月4日,微软2019开发者大会中发布了一系列的重磅消息,包含了软硬件和开源社区的各种好消息是铺天盖地,作为一名普通的开发者,我第一时间下载了 .NET Core 2.2 ...
- webpack初探 - (一)
什么webpack webpack是一个模块打包器.webpack把模块连同它的依赖一起打包生成包含这些模块的静态资源. 安装 在使用webpack时,建议不要把webpack安装到全局,如果多个项目 ...
- SmartCode 正式开源，不只是代码生成器！
SmartCode(https://github.com/Ahoo-Wang/SmartCode) SmartCode = IDataSource -> IBuildTask -> IOu ...
- 痞子衡嵌入式：开启NXP-MCUBootUtility工具的HAB加密功能 - CST（中英双语）
1 Reason for enabling HAB encryption function 为什么要开启HAB加密功能 NXP-MCUBootUtility is a tool designed fo ...