怎么用jQuery创建彩色条纹表格效果

这篇文章主要介绍“怎么用jQuery创建彩色条纹表格效果”，在日常操作中，相信很多人在怎么用jQuery创建彩色条纹表格效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用jQuery创建彩色条纹表格效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了紫云免费建站欢迎大家使用！

下面我们直接看到代码：

    
    

    
    

    
        $(function() {
            $("table tr:nth-child(odd)")
                .addClass("zebrastripe");
        });
    

    
        body,
        td {
            font-size: 10pt;
            text-align: center;
        }

        h2 {
            color: green;
        }

        table {
            background-color: black;
            border: 1px black solid;
            border-collapse: collapse;
        }

        th {
            font-size: 15px;
            padding: 5px 8px;
            border: 1px outset silver;
            background-color: rgb(197, 69, 69);
            color: white;
        }

        tr {
            border: 1px outset silver;
            padding: 5px 8px;
            background-color: white;
            margin: 1px;
        }

        tr.zebrastripe {
            background-color: green;
        }

        td {
            border: 0.5px outset silver;
            border-collapse: collapse;
            padding: 5px 8px;
        }

        .center {
            margin-left: auto;
            margin-right: auto;
        }
    




    创新互联


    
        ID
        姓名
        分数
    
    
        1
        张三
        112
    
    
        2
        李四
        109
    
    
        3
        王二
        123
    
    
        5
        赵五
        108
    
    
        6
        周六
        122
    

效果如下：

在上述代码中给大家介绍一段代码：

$(function() {
    $("table tr:nth-child(odd)").addClass("zebrastripe");
});

在这里的函数中，zebrastripe是使用的类名，odd表示奇数行将具有彩色条纹。

如果要更改偶数行条纹，只需使用：

$(function() { 
    $("table tr:nth-child(even)").addClass("zebrastripe"); 
})

注：

nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。

addClass() 方法向被选元素添加一个或多个类，该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

到此，关于“怎么用jQuery创建彩色条纹表格效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网页名称：怎么用jQuery创建彩色条纹表格效果
分享地址：http://6mz.cn/article/gsdpjo.html