Comment créer un effet de table rayé coloré en utilisant jQuery ?-js tutoriel-php.cn

Comment créer un effet de table rayé coloré en utilisant jQuery ?

藏色散人

Libérer： 2021-08-20 11:15:29

original

1765 Les gens l'ont consulté

Dans l'article précédent « Défi comment créer un tableau sans utiliser d'étiquettes ? 》Vous présente comment créer un tableau sans utiliser de balises. Les amis qui en ont besoin peuvent en savoir plus~

Le contenu principal de cet article est de vous apprendre à utiliser jQuery pour créer un effet de tableau à rayures colorées.

Vous en avez peut-être marre des mêmes styles de table. Aujourd'hui, je vais vous présenter comment créer un effet de table avec des rayures colorées. Si vous en avez besoin, ne manquez pas cet article~

Voyons le code directement ci-dessous :

<html>
<head>
    <meta charset="UTF-8">
    <title>jquery实现彩色条纹表格</title>

    <script type="text/javascript" src=
            "https://code.jquery.com/jquery-3.5.1.js">
    </script>

    <script type="text/javascript">
        $(function() {
            $("table tr:nth-child(odd)")
                .addClass("zebrastripe");
        });
    </script>

    <style type="text/css">
        body,
        td {
            font-size: 10pt;
            text-align: center;
        }

        h1 {
            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;
        }
    </style>
</head>

<body>
<h1>
    PHP中文网
</h1>
<table class="center">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>112</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>109</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王二</td>
        <td>123</td>
    </tr>
    <tr>
        <td>5</td>
        <td>赵五</td>
        <td>108</td>
    </tr>
    <tr>
        <td>6</td>
        <td>周六</td>
        <td>122</td>
    </tr>
</table>
</body>

</html>

Copier après la connexion

L'effet est le suivant :

Comment créer un effet de table rayé coloré en utilisant jQuery ?

Laissez-moi vous présenter un morceau de code dans le code ci-dessus :

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

Copier après la connexion

Dans la fonction ici, zebrastripe est le nom de classe utilisé, et impair signifie que les lignes impaires seront ont des rayures colorées.

Si vous souhaitez modifier les rayures paires, utilisez simplement :

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

Copier après la connexion

Remarque :

Le sélecteur nth-child(n) sélectionne le nième enfant de tout type appartenant à son élément parent. Tous éléments de l'élément. La méthode addClass() ajoute une ou plusieurs classes à l'élément sélectionné. Cette méthode ne supprime pas l'attribut de classe existant, mais ajoute uniquement un ou plusieurs attributs de classe. nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。

addClass()

La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Tout le monde est invité à apprendre le "

tutoriel vidéo jquery" et le "tutoriel de base javascript" !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!