如何访问<tr>使用 JavaScript 的 Table 元素？

给定一个 HTML 表格，任务是从控制器访问表格元素并突出显示我们想要的任何行。

方法：我们将使用 JavaScript 中的基本 DOM 操作来访问表格行元素。我们将在我们点击的行中添加高亮类，如果高亮类已经存在，那么我们将删除这个类以使其正常。

• getElementById() 方法：要从其 ID 中选择 HTML 中的任何元素，我们将选择表来执行上述操作。
• addEventListener() 方法：选择这个表后，我们将添加一个事件监听器来监听点击事件。
• path：当我们点击窗口上的任何一点时，Path 描述了它所属的完整路径。例如，如果我们点击一个表格的 td 元素，那么它的 Path 将是 [td, tr, tbody, table, body, html, document, Window]。
• 选择该行后，我们将在其 classList 中查找 highlight 类，如果我们找到它，只需删除该类，如果不包含它则添加。

例子：

  

    
        How to Access tr element from
        Table using JavaScript ?
    
  
    
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        /* Basic CSS to design table */
        table {
            border-collapse: collapse;
            width: 100%;
        }
  
        th,
        td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
  
        /* CSS command for the row to highlight */
        .highlight {
            background-color: #b8b8b8;
        }
    

  

    GeeksforGeeks
  
    
        Access tr element from
        Table using JavaScript
    
  
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    NameEmailPositionShivam [e-mail] Stack DeveloperShashank [e-mail] DeveloperAkash [e-mail] EngineerShivam [e-mail] Hacker
  
    
  
        // JavaScript Code to Highlight any
        // row in the given table.
        document.getElementById('table_to_highlight')
            .addEventListener('click', function (item) {
  
                // To get tr tag 
                // In the row where we click
                var row = item.path[1];
  
                var row_value = "";
  
                for (var j = 0; j < row.cells.length; j++) {
  
                    row_value += row.cells[j].innerHTML;
                    row_value += " | ";
                }
  
                alert(row_value);
  
                // Toggle the highlight
                if (row.classList.contains('highlight'))
                    row.classList.remove('highlight');
                else
                    row.classList.add('highlight');
            });
    

  

输出：