Wie erstelle ich mit jQuery einen bunt gestreiften Tabelleneffekt?-js-Tutorial-php.cn

Wie erstelle ich mit jQuery einen bunt gestreiften Tabelleneffekt?

藏色散人

Freigeben： 2021-08-20 11:15:29

Original

1768 Leute haben es durchsucht

Im vorherigen Artikel „Herausforderung, wie man eine Tabelle erstellt, ohne Etiketten zu verwenden? 》Stellt Ihnen vor, wie Sie eine Tabelle ohne die Verwendung von Tags erstellen. Freunde, die es benötigen, können mehr erfahren~

Der Hauptinhalt dieses Artikels besteht darin, Ihnen beizubringen, wie Sie mit jQuery einen farbenfrohen gestreiften Tabelleneffekt erstellen.

Vielleicht haben Sie die gleichen Tischstile satt. Heute zeige ich Ihnen, wie Sie einen Tischeffekt mit farbigen Streifen erstellen. Wenn Sie ihn brauchen, sollten Sie sich diesen Artikel nicht entgehen lassen:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie erstelle ich mit jQuery einen bunt gestreiften Tabelleneffekt? Lassen Sie mich Ihnen einen Codeabschnitt im obigen Code vorstellen:

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

Nach dem Login kopieren

In der Funktion hier ist Zebrastreifen der verwendete Klassenname, und ungerade bedeutet, dass ungerade Zeilen verwendet werden haben farbige Streifen.

Wenn Sie gerade Zeilenstreifen ändern möchten, verwenden Sie einfach:

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

Nach dem Login kopieren

Hinweis:

nth-child(n)-Selektor wählt das n-te Kind eines beliebigen Typs aus, der zu seinem übergeordneten Element All gehört Elemente des Elements.

addClass()-Methode fügt dem ausgewählten Element eine oder mehrere Klassen hinzu. Diese Methode entfernt nicht das vorhandene Klassenattribut, sondern fügt nur ein oder mehrere Klassenattribute hinzu. nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。

addClass()

Die chinesische Website-Plattform PHP verfügt über zahlreiche Video-Lehrressourcen. Jeder ist herzlich willkommen, „

JQuery-Video-Tutorial“ und „Javascript-Basis-Tutorial“ zu lernen!

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit jQuery einen bunt gestreiften Tabelleneffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!