如何在 JavaScript 中不知道完整 ID 的情况下隐藏除选定行之外的所有行？

给定一个具有一定行数的 HTML 表，任务是使用 JavaScript 在不知道其 ID 的情况下隐藏除选定行之外的所有行。

方法：在原生 JavaScript 中使用 querySelectorAll()、forEach()、addEventListener() 和 filter() 方法以及扩展运算符(...)。首先，我们使用 querySelectorAll() 方法选择除标题行之外的所有表行，将 tr:not(:first-child) 选择器作为字符串参数传入。我们使用 forEach() 方法遍历每个表行。现在，对于每个表行，使用 addEventListener() 方法将事件侦听器附加到它，事件是单击事件。

在事件侦听器内部，声明了一个变量 rows，它以数组的形式存储所有表行元素，因为扩展运算符用于将 querySelectorAll() 方法返回的节点列表转换为数组。我们使用 filter() 方法从所有行中过滤某些行，并在其中传递一个参数元素。过滤行的条件是，如果该行没有被点击，我们应该使用设置为值 none 的 display 属性隐藏它。

例子：

HTML

  

    
        body {
            text-align: center;
        }
        h1 {
            color: green;
            font-size: 2.5rem;
        }
        p {
            font-size: 1.5rem;
            font-weight: bold;
        }
        table {
            margin: 0 auto;
        }
  
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
  
        th,
        td {
            padding: 0.5rem;
        }
        tr:not(:first-child) {
            cursor: pointer;
        }
        tr:not(:first-child):hover {
            background: green;
            color: white;
        }
    

  

    GeeksforGeeks
    JavaScript - Hide all rows except
       selected one without ID
    
  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    Book NameAuthor NameGenreThe Book ThiefMarkus ZusakHistorical FictionThe Cruel PrinceHolly BlackFantasyThe Silent PatientAlex MichaelidesPsychological Fiction
    
        document.querySelectorAll(
  
          // Select all rows except the first one 
          "tr:not(:first-child)").forEach(function (e) {
  
            // Add onClick event listener
            // to selected rows
            e.addEventListener("click", function () {
  
                // Get all rows except the first one 
                var rows = 
                    [...document.querySelectorAll(
                      "tr:not(:first-child)"
                    )];
  
                var notSelectedRows = 
                    rows.filter(function (element) {
                      
                    // Hide the rows that have
                    // not been clicked
                    if (element !== e) {
                        element.style.display = "none";
                    }
                });
            });
        });
    

  

输出：