jQuery应用实例2：表格隔行换色

Posted 2020-10-22 xuyiqing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery应用实例2：表格隔行换色相关的知识，希望对你有一定的参考价值。

这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8376312.html

接下来利用上一篇提到的选择器利用jQuery实现：

发现原来多行代码这里只需要两行：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格隔行换色</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("tbody>tr:even").css("background-color","pink");
                $("tbody>tr:odd").css("background-color","aqua");
            });
        </script>
        
        <style>
            
        </style>

    </head>

    <body>
        <table border="1" width="500" height="50" align="center" 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>

View Code

更好的方式是直接为标签添加类：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格隔行换色</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("tbody>tr:even").addClass("even");
                $("tbody>tr:odd").addClass("odd");
            });
        </script>
        
        <style>
            .even{
                background-color: pink;
            }
            .odd{
                background-color: aqua;
            }
        </style>

    </head>

    <body>
        <table border="1" width="500" height="50" align="center" 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>

View Code

实际开发中是将样式写入css文件中link引入的，

这里为了方便展示写在一个文件中

以上是关于jQuery应用实例2：表格隔行换色的主要内容，如果未能解决你的问题，请参考以下文章

JQ——选择器的应用（表格的隔行换色全选和全不选）

javascript 表格隔行换色