效果图:

知识点精讲: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实现表格的隔行换色的更多相关文章

  1. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  2. Bootstrap3基础 table-striped 表格实现隔行换色(浅灰色与白色交替)

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  3. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  4. 使用JS创建表格以及隔行换色(包括隔N行换色)

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  5. JS案例四:表格的隔行换色以及高亮显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  7. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  8. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jQuery应用实例2:表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

随机推荐

  1. ASP.NET后台调用前台JS函数的三种常见方法

    第一种:使用普通的添加控件中的Attributes属性进行调用 例如,像一般的普通的按钮:Button1.Attributes.Add("onclick","MyFun( ...

  2. ORACLE删除当前用户下所有的表的方法

    1.如果有删除用户的权限,则可以: drop user user_name cascade; 加了cascade就可以把用户连带的数据全部删掉. 删除后再创建该用户. --创建管理员用户 create ...

  3. 软件分析(Mobile Apps )--百词斩

    1) 此类软件是什么时候开始出现的, 这些软件是怎么说服你(陌生人)成为他们的用户的? 他们的目标都是盈利么? 他们的目标都是赚取用户的现金么?还是别的? 2) 你个人第一次用此类软件是什么时候,你当 ...

  4. Python开发入门与实战19-Windows Azure web 应用部署

    19. 微软云web应用部署 上一章节我们介绍了如何实现在微软云通过虚拟机部署我们的在python django应用,本章我们来介绍如何Windows Azure上部署通过部署网站的方式来部署我们的应 ...

  5. .net core 学习笔记(1)-分页控件的使用

    最近有个小项目,用.net core开发练练手,碰到的第一个问题就是分页控件的问题,自己写太费时间,上网查了下,发现有人已经封装好了的,就拿过来用了,分页控件github:https://github ...

  6. 遗传算法的C语言实现(一):以非线性函数求极值为例

    以前搞数学建模的时候,研究过(其实也不算是研究,只是大概了解)一些人工智能算法,比如前面已经说过的粒子群算法(PSO),还有著名的遗传算法(GA),模拟退火算法(SA),蚁群算法(ACA)等.当时懂得 ...

  7. iOS学习之MVC,MVVM,MVP模式优缺点

    为什么要关注架构设计? 因为假如你不关心架构,那么总有一天,需要在同一个庞大的类中调试若干复杂的事情,你会发现在这样的条件下,根本不可能在这个类中快速的找到以及有效的修改任何bug.当然,把这样的一个 ...

  8. 关于android的UI更新机制与误区

    Android系统的消息队列和消息循环都是主线程的,其它后台服务等无法直接更新,必须通过下面的消息队列,由主线程的消息循环去依次执行更新ui: 同时对于费时间超过5秒的事件,比如网络链接等,建议新开线 ...

  9. Ubuntu14.04安装build-essential失败,包依赖问题如何解决?

    正在读取软件包列表... 完成 正在分析软件包的依赖关系树        正在读取状态信息... 完成        有一些软件包无法被安装.如果您用的是 unstable 发行版,这也许是 因为系统 ...

  10. Myeclipse+AJAX+Servlet

    最近刚开始学AJAX的知识,这里介绍一个简单的Myeclipse+AJAX+Servlet项目. 此项目包含3个文件:index.jsp.check.java.还有一个需要配置的文件是:web.xml ...