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')

    效果图:

  • 相关阅读:
    【VUE】父子组件通信
    【mysql】密码重设
    Joomla 3.2.0
    浅谈内网渗透
    使用Fiddler的X5S插件查找XSS漏洞
    Asp文件锁定脚本
    php内网探测脚本&简单代理访问
    Linux关闭休眠和屏保模式
    不重启修改计算机名【批处理】
    mimikatz不反弹读取密码
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9373608.html
Copyright © 2011-2022 走看看