表格的颜色一样不利于区分，而利用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. 【Linux 网络编程】滑动窗口协议

    <1>通知接受窗口(rwnd): 预防应用程序发送的数据超过对方的缓冲区.接收方使用的流量控制<2>拥塞窗口(cwnd): 预防应用程序发送的数据超过网络所承受的能力.发送方使 ...

  2. set的常见用法

    set的使用 set是什么 set是一个内部有序且不含重复元素的容器 用处 *使得元素自动有序 *去除重复元素 set的引入 # include <set> using namespace ...

  3. Bug快到碗里来

    Bug快到碗里来 python错误--'list' object is not callable 原因及解决方法1 你定义了一个变量的变量名和系统自带的关键字冲突,调用变量时关键字被传到调用的位置,就 ...

  4. python 列表操作-切片

  5. DNS服务器搭建笔记

    DNS在linux服务器上的服务名是named,而named服务依赖软件bind. 环境:     系统版本:VBOX虚拟机centos6.0.     本机内网IP 192.168.2.198.   ...

  6. P1224 [NOI2013]向量内积

    传送门 发现这个内积和矩乘有点像,考虑构造一个 $n$ 行 $m$ 列的矩阵 $A$,每一行都是一个题目给定的 $m$ 维向量 设 $B=AA^T$ ,其中 $A^T$ 为 $A$ 的转置矩阵,那么对 ...

  7. vue-awesome-swiper轮播插件

    1. github上搜索vue-awesome-swiper 2. readme中有安装方法,建议在插件名后@版本号,使用稳定的老版本 npm install vue-awesome-swiper@x ...

  8. cx_Oracle 操作oracle数据库

    cx_Oracle 操作oracle数据库 class MyOracle(): def __init__(self, host_name="ip", port=1521, sid= ...

  9. Minor GC、Major GC、Full GC、分配担保

    转载:http://www.importnew.com/15820.html 空间分配担保 区别 在 Plumbr 从事 GC 暂停检测相关功能的工作时,我被迫用自己的方式,通过大量文章.书籍和演讲来 ...

  10. git上传文件夹报错： ! [rejected] master -> master (fetch first) error: failed to push some refs to 'https://github.com/taminachen/rjxm.git' hint: Updates were rejected because the remote contains work

    使用git上传本地文件夹到远程仓库,使用如下命令:git push -u origin master时报错 原因是在GitHub创建仓库时创建了readme文件,但是本地没有这个文件,造成本地目录与远 ...