表格的颜色一样不利于区分，而利用jQuery则可以很方便的进行表格的隔行换色操作，原表如下：

这样看着很不方便，但是隔行换色之后非常便捷清楚。

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>使用jQuery完成表格隔行换色</title>

        <link rel="stylesheet" href="css/style.css" />

        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

        <script>

            $(function(){

                $("tbody tr:even").addClass("even");//将tbody的每个tr的偶数行添加even的类，添加后相当于每个奇数行都添加<class="even">的代码，偶数行同样

                $("tbody tr:odd").addClass("odd");//even用来选择偶数行odd用来选择奇数行

            })

        </script>

    </head>

    <body>

        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">

            <thead>

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr >

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr >

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr >

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr >

                    <td>4</td>

                    <td>赵六</td>

                    <td>29</td>

                </tr>

                <tr >

                    <td>5</td>

                    <td>田七</td>

                    <td>30</td>

                </tr>

                <tr >

                    <td>6</td>

                    <td>汾九</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

css代码如下：

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

form div { margin:5px 0;}

.int label { float:left; width:100px; text-align:right;}

.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}

.sub { padding-left:100px;}

.sub input { margin-right:10px; }

.formtips{width: 200px;margin:2px;padding:2px;}

.onError{

    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;

    padding-left:25px;

}

.onSuccess{

    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;

    padding-left:25px;

}

.high{

    color:red;

}

  div,span,p {

    width:140px;

    height:140px;

    margin:5px;

    background:#aaa;

    border:#000 1px solid;

    float:left;

    font-size:17px;

    font-family:Verdana;

  }

  div.mini {

    width:55px;

    height:55px;

    background-color: #aaa;

    font-size:12px;

  }

  div.hide {

    display:none;

  }

table        { border:0;border-collapse:collapse;}

td    { font:normal 12px/17px Arial;padding:2px;width:100px;}

th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}

.even        { background:#FFF38F;}  /* 偶数行样式*/

.odd        { background:#FFFFEE;}  /* 奇数行样式*/

.selected        { background:#FF6500;color:#fff;}

正是因为有.even和.odd里面的设置，这样才能使用addClass()方法，达到隔行换色的方法。当然也可以不用addClass()方法。

另一种方法的代码：

            $(function(){

                $("tbody tr:even").css("background-color","yellow");//注意颜色也要用分号引起来

                $("tbody tr:odd").css("background-color","pink");

//                 $("tbody tr:even").addClass("even");

//                 $("tbody tr:odd").addClass("odd");

            })

表的结构不变，用css()方法可以添加属性和属性值。

jQuery_完成表格的隔行换色的更多相关文章

  1. Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

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

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

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

  3. 使用JS创建表格以及隔行换色（包括隔N行换色）

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

  4. 模块：jquery实现表格的隔行换色

    效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现 ...

  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. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. JQuery案例一：实现表格隔行换色

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

随机推荐

  1. Shell 变量详解教程之位置变量与预定义变量

    Shell 变量分为3部分,分别是用户自定义变量.位置变量和预定义变量. 一.   自定义变量 那么,什么是变量呢?简单的说,就是让某一个特定字符串代表不固定的内容,用户定义的变量是最普通的Shell ...

  2. c语言程序命名规范：函数、变量、数组、文件名

    函数: //send or recv data task void send_recv_data(void *pvParameters); //get socket error code. retur ...

  3. 【6.12校内test】T2 子集

    这道题大概是这三道题里最简单的啦 但这阻止不了我废的脚步 [问题描述] 对于 n=4 时,对应的集合 s={4,3,2,1},他的非空子集有 15 个依次如下: {1} {2} {1,2} {3} { ...

  4. 05、解剖CEL文件各版本格式和读取方法（非R语言）

    相比DAT文件,网络上更支持CEL级别的文件.CEL已经把DAT图像转换成数据了,而且CEL比DAT所占空间小得多.介绍一下CEL文件的格式,CEL文件有文本文件(TextCelFile,版本3).B ...

  5. Jquery复习（七）之尺寸

    jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHei ...

  6. join 与 countdownlatch 的区别 扩展 栅栏 CyclicBarrier

    我们先看一个 小例子 , 使用 join 与CountDownSlatch 都可以完成 当1,2线程 完全结束后 3 线程 start 对比我们就能够知道 CountDownSlatch 比 JOIN ...

  7. mysql如何查询一个字段在哪几张表中

    SELECT TABLE_SCHEMA,TABLE_NAME FROM information_schema.`COLUMNS` WHERE COLUMN_NAME = 'xxx' ; xxx替换成需 ...

  8. 使用kong-dashboard

    具体命令行操作只需按照官网一步一步来即可(https://docs.konghq.com/1.4.x/getting-started/configuring-a-service/),这里介绍图形化操作 ...

  9. QByteArray引发的bug

    QByteArray引发的bug 在接收UDP数据的函数里,有如下代码片段 if(0x10 == data.size() && 0xCA == (unsigned char)data. ...

  10. MySQL 数据库的创建、修改、删除、跳转

    一. 创建数据库 []代表可选项. IF NOT EXISTS:在创建数据库之前进行判断,只有该数据库目前尚不存在时才能执行操作. <数据库名>:创建数据库的名称.MySQL 的数据存储区 ...