效果图:

知识点精讲: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. Jackson ObjectMapper类使用解析

    /** * Jackson ObjectMapper类 */ //ObjectMapper类是Jackson库的主要类.它提供一些功能将转换成Java对象匹配JSON结构,反之亦然.它使用JsonPa ...

  2. flex中image控件source属性改变的例子

    Download: main.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Applicat ...

  3. 关于SqlHelper

    在 SqlHelper 类中实现的方法包括:   ExecuteNonQuery.此方法用于执行不返回任何行或值的命令.这些命令通常用于执行数据库更新,但也可用于返回存储过程的输出参数.   Exec ...

  4. C++与Java的语法区别

    C++与Java的语法区别 首先,两个大的不同是主函数和怎样编译的不同,接下来是许多小的区别. main 函数C++//自由浮动的函数int main( int argc, char* argv[]) ...

  5. sac 文档使用

    目前我遇到的问题是我想要得到BHE,BHN 方向的数据,但发现IRIS下载的数据都是BH1,BH2 方向的,很困惑,请教大神后发现,原来IRIS之所以提供BH1,BH2方向是因为很多时候台站的水平方向 ...

  6. Python开发入门与实战21-订阅事件(subscribe)

    21. 订阅事件(subscribe) 新用户关注微信公众平台,将产生一个订阅事件,即subscribe事件,在新用户关注公众平台后为新用户提供一些简明扼要的公众号说明 事件推送(event): 接收 ...

  7. ScorllView中嵌套listView与Viewpager的焦点问题处理

    解决进入该页面直接显示中的listview而不是从页面最顶端开始显示在setAdapter后调用listview的smoothScrollTo(0,20); 解决listview只能显示一条 需要重写 ...

  8. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  9. ArcMap计算PolyLine中点VBA

    Dim pGeo As IGeometrySet pGeo = [Shape]Dim pPolyline As IPolylineSet pPolyline = pGeoDim pCurve As I ...

  10. python 改变字符串的编码方式

    字符串str的编码方式为utf-8,转化为gbk,分为两步 1. str=str.decode('utf-8') 2. str=str.encode('gbk')