如何使用jQuery选择表中的所有偶数/奇数行？

在本文中，我们将了解如何通过选择交替行来制作表格，即通过单击相应的按钮来选择偶数行或奇数行。在选择任一行的特定数据/元素或突出显示大数据集中的数据表时，此功能非常有用。这使我们能够一目了然地快速查看表格。我们可以通过使用表中的 tr:odd或tr:even选择器选择奇数或偶数行来实现相同的效果。 HTML 表中的行索引从 0 开始。我们将使用 jQuery 通过单击按钮来选择任一行。

为了在 HTML 文件中使用 jQuery，我们将在 标签中添加以下语法。

选择奇数行的语法：

$("table tr:odd").css({"property":"value",
                           "property": "value"});

选择偶数行的语法：

$("table tr:even").css({"property":"value",
                           "property": "value"});

方法：

• 设计一个包含数据的表。使用所需的样式属性突出显示不同的行以区分行数据。
• 使用“tr:odd”选择奇数数据&使用“tr:even”选择行中的偶数数据。

示例：在这一步中，我们将创建一个具有表格行和表格列的表格，并将使用上述所有语法来选择行。

HTML

  
    
    
    
    Geeks for Geeks
      
    
    
    
      
    
      h1 {
        color: #006600;
      }
  
      button {
        color: white;
        background-color: #006600;
        width: auto;
        height: 30px;
      }
  
      body {
        text-align: center;
      }
  
      div {
        margin: 10px;
        height: auto;
        width: auto;
        position: relative;
        display: flex;
        justify-content: center;
        text-align: center;
        display: flex;
      }
  
      table,
      tr,
      thead,
      td {
        border: 5px solid #006600;
        border-collapse: collapse;
        padding: 10px;
      }
  
      thead {
        color: #006600;
        font-size: 20px;
        font-weight: bold;
      }
    
  
  
  
    Geeks For Geeks
  
    ODD ROWS
    EVEN ROWS
  
    
      
        
          
            
            
            
            
          
          
            
            
            
            
          
          
            
            
            
            
          
          
            
            
            
            
          
          
            
            
            
            
          
        
      IndexCol-1Col-2Col-31Column00Column01Column022Column10Column11Column123Column20Column21Column224Column30Column31Column2
    
  
    
      $(document).ready(function () {
        $("#odd").click(function () {
          $("table tr:odd").css({
            "background-color": "#00e673",
            color: "white",
          });
        });
        $("#even").click(function () {
          $("table tr:even").css({
            "background-color": "#b3b3cc",
            color: "white",
          });
        });
      });
    
  

输出：