這篇文章主要介紹“怎么用jQuery創(chuàng)建彩色條紋表格效果”，在日常操作中，相信很多人在怎么用jQuery創(chuàng)建彩色條紋表格效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用jQuery創(chuàng)建彩色條紋表格效果”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了紫云免費建站歡迎大家使用！

下面我們直接看到代碼：

    
    

    
    

    
        $(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;
        }
    




    創(chuàng)新互聯(lián)


    
        ID
        姓名
        分?jǐn)?shù)
    
    
        1
        張三
        112
    
    
        2
        李四
        109
    
    
        3
        王二
        123
    
    
        5
        趙五
        108
    
    
        6
        周六
        122
    

效果如下：

在上述代碼中給大家介紹一段代碼：

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

在這里的函數(shù)中，zebrastripe是使用的類名，odd表示奇數(shù)行將具有彩色條紋。

如果要更改偶數(shù)行條紋，只需使用：

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

注：

nth-child(n) 選擇器選取屬于其父元素的不限類型的第 n 個子元素的所有元素。

addClass() 方法向被選元素添加一個或多個類，該方法不會移除已存在的 class 屬性，僅僅添加一個或多個 class 屬性。

到此，關(guān)于“怎么用jQuery創(chuàng)建彩色條紋表格效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
文章題目：怎么用jQuery創(chuàng)建彩色條紋表格效果
網(wǎng)頁地址：http://weahome.cn/article/gsdpjo.html