模块:jquery实现表格的隔行换色
效果图:

知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数;
代码实现过程:
样式写法:
<style type="text/css">
.even{background-color:#F0C040;}//定义奇数行背景色
.odd{background-color:#93BEE2;}//定义偶数行背景色
</style>
html代码:在表格中,除了表格内容外,不需要添加任何内容
<table border="1" cellspacing="0" cellpadding="0">
<tr><th>Header</th><td>1111</td><td>2222</td></tr>
<tr><th>Header</th><td>Data</td><td>33333</td></tr>
<tr><th>Header</th><td>Data</td><td>33333</td></tr>
<tr><th>Header</th><td>Data</td><td>33333</td></tr>
</table>
jquery代码实现:
<script type="text/javascript">
$(document).ready(function(){
$("tr:odd").addClass("odd"); //通过tr:odd给奇数行添加odd样式
$("tr:even").addClass("even");//通过tr:even给偶数行添加even样式 });
模块:jquery实现表格的隔行换色的更多相关文章
- jQuery_完成表格的隔行换色
表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...
- Bootstrap3基础 table-striped 表格实现隔行换色(浅灰色与白色交替)
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- JavaScript学习——表格的隔行换色+高亮显示
1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...
- 使用JS创建表格以及隔行换色(包括隔N行换色)
<html> <head> <title></title> <style> table{ width:800px; border-colla ...
- JS案例四:表格的隔行换色以及高亮显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js课程 4-11 表格如何实现隔行换色
js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- JQuery案例一:实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery应用实例2:表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
随机推荐
- iOS中真机连接电脑运行程序出现问题
- 转载css的background-position
这是一个有趣的话题 其实我并不确切的平时大家是怎么去应用或者玩转一个属性,一个值.我能肯定的是这些东西都有不少的可玩性. 我今天要聊的 background-position 应该已经被大家玩得色彩斑 ...
- 人工智能交互集成在线语音合成能力的Tips
在线语音合成就是在联网的场景下将文字转换成声音,实现机器向人的声音交互.这个概念应该是比较好理解的,下面就结合官网的Android在线合成的Demo讲解一下合成的流程以及大家经常遇到的一些问题. 到官 ...
- PHP 关于SQL注入的防范措施。
最近在使用框架的时候还是有点不安,不知道框架的设计者有没有考虑到SQL-Injection的问题,我在顶层需不需要做一些必要的过滤等等,由 此我特意的去StackOverflow看了下,真是获益良多, ...
- 安全协议系列(四)----SSL与TLS
当今社会,电子商务大行其道,作为网络安全 infrastructure 之一的 -- SSL/TLS 协议的重要性已不用多说.OpenSSL 则是基于该协议的目前应用最广泛的开源实现,其影响之大,以至 ...
- mysql 查看数据库、表的基本命令
1:show databases; 查看所有的数据库,等同于select schema_name from information_schema.schemata\G.\G 替换;,以纵向报表的形式输 ...
- Mac下设置系统PATH
1. 进入当前用户的home目录 输入cd ~ 2. 创建.bash_profile 输入touch .bash_profile 3. 编辑.bash_profile文件 输入open -e .bas ...
- android 透明度
透明度百分比对应的十六进制: (说明:百分比计算出来会有小数,按照常规的四舍五入处理,详情请往下查看) 百分比:0% HEX: 00 百分比:1% HEX: 30 百分比:2% HEX: 50 百分比 ...
- Spring学习笔记(1)——资源加载
<!-- 占坑,迟点补充底层原理 --> Spring支持4种资源的地址前缀 (1)从类路径中加载资源——classpath: classpath:和classpath:/是等价的,都是相 ...
- 2016 2 - 23 arc中的所有权修饰符(_strong修饰符与_weak修饰符)
一 _strong修饰符 1._strong修饰符是id类型和对象类型默认的所有权修饰符.如下: id obj = [[NSObject alloc] init];//在没用明确变量所有权修饰符时,会 ...