表格的颜色一样不利于区分，而利用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. CDH的ntp时间同步

    云服务器: ntpq -p ntpdate -u 10.52.255.1  #手动同步 自建NTP服务器: https://www.cnblogs.com/yinzhengjie/p/9480665. ...

  2. 【7.9校内test】T2 极值问题

    这个题真的,毫无思路的说,但是我们会打表啊: lz的打表之路: 当然是手写一个暴力啦(*^▽^*)! 然后滚去配置lemon测试一下暴力可以得多少分qwq: 是的40分呢! 然后其实看上面也能看出来一 ...

  3. vs 小贴士

    1. ubuntu上vs code root执行 sudo code --user-data-dir="~/.vscode-root" 2. 设置vs code 打开在新的标签页打 ...

  4. phpstorm配合xdebug进行本地调试代码

    笔者在使用的环境是wamp3.1.6和phpstorm2018 ,php选择的环境是php7.2 1. 在php.ini中添加xdebug的配置信息 首先建议是先找对php.ini的位置,可以在php ...

  5. mysql 加密 解密函数

    select   HEX(AES_ENCRYPT('你好世界','ABC123456')) select   AES_DECRYPT(UNHEX('E85A104B6142A7375E53C0545C ...

  6. Git-版本控制 (三)

    前面两篇我们成功安装了Git,并且成功创建了我们的版本库. 创建了版本库,怎么可以不往里面放内容呢,所以今天的任务就是学会将文件放入至我们的版本库中...... 首先,我们点开我们的"Git ...

  7. 部署SonarQube代码检测服务并结合Jenkins使用

    一.SonarQube部署前的内核参数等配置以及java环境配置 1. 修改内核参数配置,使满足环境要求 [root@sonarqube ~]# vim /etc/sysctl.conf vm.max ...

  8. 解决Asp.net Core中chtml文档中文乱码的问题

    原因 由于Visual Studio 2017在保存chtml时,文本格式非utf-8,所以导致中文会出现乱码情况. 解决办法 在工具->扩展与更新中添加插件"ForceUTF8 (w ...

  9. C#判断点是否在直线上

    判断点在直线上,实际上就是判断点到直线上的垂直距离.点到直线垂直距离为0,则点在线上.当然也可以误差设置误差几个像素. 参考资料并进行修改:http://blog.sina.com.cn/s/blog ...

  10. java 判断5张牌的组成

    题目: 一副牌中发五张扑克牌给你,判断是四条,三带二.三带一加一.两对.一对.顺子.还是什么都不是. 控制台输入: 1,1,1,1,2 示例输出: 四条 Java方法的代码: static Strin ...