How to create a colorful striped table effect using jQuery?-JS Tutorial-php.cn

How to create a colorful striped table effect using jQuery?

藏色散人

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

Original

1777 people have browsed it

In the previous article "Challenge how to create a table without using labels? 》Introduces you how to create a table without using tags. Friends who need it can learn more~

The main content of this article is to teach you to use jQuery to create a colorful striped table effect.

You may be tired of the same table styles. Today I will introduce to you how to create a colorful striped table effect. If you need it, don’t miss this article~

We can see it directly below Code:

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

Copy after login

The effect is as follows:

How to create a colorful striped table effect using jQuery?

In the above code, I will introduce to you a piece of code:

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

Copy after login

Here In the function, zebrastripe is the class name used, and odd means that odd-numbered rows will have colored stripes.

If you want to change the even row stripes, just use:

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

Copy after login

Note:

nth-child(n) The selector selects all elements that are the nth child element of any type of its parent element.

addClass() method adds one or more classes to the selected element. This method does not remove the existing class attribute, but only adds one or more class attributes.

PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "jquery video tutorial" and "javascript basic tutorial"!

The above is the detailed content of How to create a colorful striped table effect using jQuery?. For more information, please follow other related articles on the PHP Chinese website!