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 Keytool Keystore命令
Java keytool是密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.它还允许用户储存他们的 ...
- Android之greenDao使用
文章大纲 一.greenDao简介二.greenDao实战三.项目源码下载四.参考文章 一.greenDao简介 1. 什么是greenDao GreenDAO是一个开源的Android OR ...
- 章节八、3-如何用Chrome开发者工具查看元素
一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...
- 基于BootstarbTable实现加载更多的方式
在工作中,我们有时候会遇到一些需求实现每次在页面上显示的数据每次都是通过请求数据库端来实现,在不通过上一页,下一页的方式来实现我们要展示的数据,通过js请求每次加载10条或者任意数量的数据. 代码展示 ...
- caffe安装教程(Ubuntu14+GPU+pycaffe+anaconda2）
caffe安装教程 本文所使用的底层环境配置:cuda8.cudnn6.OpenCV2.4.5.anaconda2(Python2.7).如使用其他版本的环境,如cuda,可安装自己的版本,但须在相应 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登录
壹周回顾 哈喽,又是元气满满的一个周一,又与大家见面了,周末就是团圆节了,正好咱们的前后端也要团圆了,为什么这么说呢,因为以后的开发可能就需要前后端一起了,两边也终于会师了,还有几天Vue系列就基本告 ...
- Chapter 5 Blood Type——32
"Where are you all going, exactly?" He was still looking ahead, expressionless. “真的,你要去哪里? ...
- Win32对话框程序（2）
接着Win32对话框程序(1)来写 ,解决遗留的问题,即理解函数及其调用关系.文章中有些地方是自己的推断,因此肯定有叙述不准确甚至错误的地方,请指正,感谢~ ********************* ...
- SLAM+语音机器人DIY系列：（四）差分底盘设计——1.stm32主控硬件设计
摘要 运动底盘是移动机器人的重要组成部分,不像激光雷达.IMU.麦克风.音响.摄像头这些通用部件可以直接买到,很难买到通用的底盘.一方面是因为底盘的尺寸结构和参数是要与具体机器人匹配的:另一方面是因为 ...
- 前端性能核对表Checklist-2018
前端性能核对表Checklist-2018 1. 计划与度量 Get Ready: Planning and Metrics ☐ Establish a performance culture. ☐ ...