效果图:

知识点精讲: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. shell 问题解决

    如果想找常用指令,请点击图片 shell 脚本中的指令,在不确定情况下,不要随意使用nohup,否则也许会造成灾难性后果,比如--内存爆掉 shell 随机函数生成 function random() ...

  2. Titanium studio介绍

    1.Titanium Studio 概述 TitaniumStudio是Appcelerator公司开发的一款基于Eclipse的,使开发者利用Javascript来快速开发移动应用程序的跨平台的集成 ...

  3. my vim

    set nu set cindent set smartindent set cursorline set showcmd set completeopt=preview,menu set autow ...

  4. 2.4G/5G频段WLAN各国使用信道表

    List of WLAN channels (维基百科):https://en.wikipedia.org/wiki/List_of_WLAN_channels 2.4G 5G 另附美国5G允许使用的 ...

  5. MySQL正则表达式

    正则表达式作用是匹配方本,将一个模式(正则表达式)与一个文本串进行比较. MySQL用WHERE子句对正则表达式提供了初步的支持,允许你指定用正则表达式过滤SELECT检索出的数据. MySQL仅支持 ...

  6. JQuery基础总结下

    JQuery动画与特效 show()和hide()方法可以用来显示和隐藏元素,toggle()方法用来切换显示和隐藏. $(selector).hide(speed,[callback]); $(se ...

  7. shell 指定范围随机数抽取

  8. UpdatePanel里的Repeater和DropDownList

    在updatepanel里使用dropdownlist的AutoPostBack,正常情况下都可以局部刷新. 但是,如果updatepanel下是Repeater,repeater里绑定dropdow ...

  9. WebDriver 常见Exception处理

    1. org.openqa.selenium.WebDriverException: unknown error: unhandled inspector error: {"code&quo ...

  10. Arraylist<E>

    ArrayList 应该是大部分人接触JCF之后, 第一个熟悉和使用的类.它的特点主要有一下几个: 1. 基于数组 public ArrayList(int initialCapacity) { if ...