如何使用jQuery创建一个斑马条纹的表格效果

如何使用jQuery创建一个斑马条纹的表格效果

给出一个有表格的HTML文档,任务是用jQuery在表格上创建一个斑马纹的表格效果。

方法:要实现斑马纹表的效果,请使用以下代码片段。

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

在上述函数中,zebrastripe是使用的类名,奇数表示奇数的行将有彩色条纹。

要改变偶数行的条纹,只需使用:

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

在下面演示的上述方法中,jQuery-3.5.1.js包含源代码。

例子:下面是上述方法的演示。

<html>
  
<head>
    <title>jQuery Zebra Stripes Demonstration</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>
        GeeksforGeeks
    </h1>
    <table class="center">
        <tr>
            <th>ID</th>
            <th>Course</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Fork CPP</td>
            <td>Free</td>
        </tr>
        <tr>
            <td>2</td>
            <td>DSA</td>
            <td>2499</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Fork Java</td>
            <td>Free</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Linux</td>
            <td>599</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Fork Python</td>
            <td>Free</td>
        </tr>
    </table>
</body>
  
</html>

输出:

如何使用jQuery创建一个斑马条纹的表格效果?

上述示范的产出

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程