Bagaimana untuk mencipta kesan jadual berjalur berwarna-warni menggunakan jQuery?-tutorial js-php.cn

Bagaimana untuk mencipta kesan jadual berjalur berwarna-warni menggunakan jQuery?

藏色散人

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

asal

1727 orang telah melayarinya

Dalam artikel sebelumnya "Cabar bagaimana untuk membuat jadual tanpa menggunakan tag? 》Memperkenalkan anda cara membuat jadual tanpa menggunakan tag Rakan yang memerlukannya boleh mengetahui lebih lanjut~

Kandungan utama artikel ini adalah untuk mengajar anda menggunakan jQuery untuk mencipta kesan jadual berjalur berwarna-warni.

Anda mungkin bosan dengan gaya meja yang sama Hari ini saya akan memperkenalkan kepada anda cara mencipta kesan meja dengan jalur berwarna Jika anda memerlukannya, jangan ketinggalan artikel ini~

Kita boleh melihatnya terus di bawah Kod:

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

Salin selepas log masuk

Kesannya adalah seperti berikut:

Bagaimana untuk mencipta kesan jadual berjalur berwarna-warni menggunakan jQuery?

Dalam kod di atas, saya akan memperkenalkan kepada anda sekeping kod:

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

Salin selepas log masuk

Dalam fungsi di sini, zebrastripe ialah nama kelas yang digunakan dan ganjil bermaksud bahawa baris ganjil akan mempunyai jalur berwarna.

Jika anda ingin menukar jalur baris genap, hanya gunakan:

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

Salin selepas log masuk

Nota:

nth-child(n) pemilih memilih elemen yang dimiliki induknya Semua elemen subelemen ke-n dari sebarang jenis. Kaedah

addClass() menambah satu atau lebih kelas pada elemen yang dipilih Kaedah ini tidak mengalih keluar atribut kelas sedia ada, tetapi hanya menambah satu atau lebih atribut kelas.

Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Semua orang dialu-alukan untuk mempelajari "tutorial video jquery" dan "tutorial asas javascript"!

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan jadual berjalur berwarna-warni menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!