zoukankan      html  css  js  c++  java
  • 表格隔行变色

    表格的代码如下:

    <table id="data">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>工资</th>
                        <th>入职时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tom</td>
                        <td>$3500</td>
                        <td>2010-10-25</td>
                        <td>
                            <a href="javascript:void(0)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>$3400</td>
                        <td>2010-12-1</td>
                        <td>
                            <a href="javascript:void(0)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>King</td>
                        <td>$5900</td>
                        <td>2009-08-17</td>
                        <td>
                            <a href="javascript:void(0)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Scott</td>
                        <td>$3800</td>
                        <td>2012-11-17</td>
                        <td>
                            <a href="javascript:void(0)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Smith</td>
                        <td>$3100</td>
                        <td>2014-01-27</td>
                        <td>
                            <a href="javascript:void(0)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Allen</td>
                        <td>$3700</td>
                        <td>2011-12-05</td>
                        <td>
                            <a href="javascript:void(0)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>

    设置表格的样式:

        #data {
                 600px;
            }
            
            #data,
            td,
            th {
                border-collapse: collapse;
                border: 1px #AAAAAA solid;
            }
            
            td,th {
                height: 28px;
            }
            
            
            #data thead {
                background: #333399;
                color: #FFFFFF;
            }

    效果图如下:

    隔行变色、隔列变色类似:

    实现方式有三种:

    第一种,在css中设置:

    #data>tbody>tr>td:nth-child(odd){
        background-color: #ccccff;
    }

    剩下的是通过js设置:

    1、通过选择器

    $("table>tbody>tr>td:odd").css("background","#ccccff");

    2、通过添加class属性

    .odd {
        background-color: #ccccff;
    }
    $("table>tbody>tr>td:odd").addClass("odd")
    第二种添加class属性
    $('#data>tbody>tr:odd').attr('class', 'odd')

    效果图:

  • 相关阅读:
    ptyhon异步开发aiohttp
    python异步编程asyncio
    python ThreadPoolExecutor线程池和ProcessPoolExecutor进程池
    liunx 使用flask + nginx + gunicorn 部署项目
    liunx安装python3.6.8
    Grafana设置mysql为数据源
    使用pyhdfs连接HDFS进行操作
    七、Hadoop搭建Hbase
    六、Zookeeper运行环境
    五、Hadoop搭建Hive
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9373608.html
Copyright © 2011-2022 走看看