效果图:

知识点精讲: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. 处理xml c#

    using System.Xml; using System; using System.Text; using System.Net; using System.Collections; using ...

  2. 利用反射模拟一个spring的内部工作原理

    这个简单的案例是实行了登录和注册的功能,没有链接数据库.  在bean中id 是唯一的,id和name的区别在于id不能用特殊字符而name可以用特殊字符,比如:/-\.... package com ...

  3. CSipSimple的插件结构

    CSipSimple的第三方编码器是以插件形式集成的,那么它是怎么实现的?我们以音频编码器为例进行说明. 一.何为插件 工程中有一个包,com.csipsimple.plugins.codecs.从包 ...

  4. setProgressBarIndeterminateVisibility(true);

    此为在标题栏 上 设置一个loading 圈  实用...

  5. 004-For与Function进阶实战、Lazy的使用

    004-For与Function进阶实战.Lazy的使用 For进阶 非常常见的形式 可以加入条件表达式进行数据过滤 Function进阶 函数是有值的(默认的话为Unit),所以可以直接将结果赋值给 ...

  6. Matlab_Graphics(1)_2D

    1.Add title ,axis Lables, and Legend to Graph: x=linspace(-*pi,2pi,); y1=sin(x); y2=cos(x); figure p ...

  7. Struts2中Action接收参数的四种形式

    1.Struts2的Action接收参数的三种形式.      a. 使用Action的属性接收(直接在action中利用get方法来接收参数):                   login.js ...

  8. auto_ptr源码剖析

    /* * Copyright (c) 1997-1999 * Silicon Graphics Computer Systems, Inc. * * Permission to use, copy, ...

  9. jQuery性能优化

    1. 优化选择器执行的速度 优先使用ID与标记选择器 在jQuery中,访问DOM元素的最快方式是通过元素ID号,其次是通过元素的标记.因为前者源于JavaScript中的document.getEl ...

  10. 探索javascript----this的指向问题

    *this只和执行环境有关,和声明环境无关.谁调用this,this就指向谁. *this的指向分为四种: 1.作为普通函数调用: 2.作为对象的方法调用:   指向对对象,但用新变量引用该方法时候, ...