如何使用 jQuery 创建斑马条纹表格效果？

给定一个带有表格的 HTML 文档，任务是使用 jQuery 在表格上创建 Zebra Stripes 表格效果。

方法：要实现斑马条纹表格效果，请使用以下代码片段：

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

在上面的函数， zebrastripe是使用的类名， odd表示奇数行将具有彩色条纹。

要更改偶数行条纹，只需使用：

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

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

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

HTML

  

    jQuery Zebra Stripes Demonstration
  
    
    
  
    
        $(function() {
            $("table tr:nth-child(odd)")
                .addClass("zebrastripe");
        });
    
  
    
        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;
        }
    

  

    
        GeeksforGeeks
    
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    IDCoursePrice1Fork CPPFree2DSA24993Fork JavaFree5Linux5996Fork PythonFree

  

输出：

上述演示的输出