How to Access <tr> element from Table using JavaScript ?

Given an HTML table and the task is to access the table element from the Controller and highlight any row that we want.

Approach: We will use a basic DOM operation in JavaScript to access table row element. We will be adding highlight class to the row that we click, if the highlight class is already present then we will remove this class to make it normal.

  • getElementById() Method: To select any element in HTML from its ID, we will select the table to perform the above operation.
  • addEventListener() Method: After selecting this table, we will add an Event Listener to listen from the click event.
  • path: When we click at any point on window then Path describes its complete path that it belongs to. For example, if we click to a td element of a table, then its Path will be [td, tr, tbody, table, body, html, document, Window].
  • After selecting the row, we will look for highlight class in its classList, if we found it simply remove this class or add if it do not contain it.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Access tr element from
        Table using JavaScript ?
    </title>
  
    <style type="text/css">
        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;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        Access tr element from
        Table using JavaScript
    </h3>
  
    <table id="table_to_highlight">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Position</th>
        </tr>
        <tr>
            <td>Shivam Singhal</td>
            <td>shivamsinghal@app.com</td>
            <td>Full Stack Developer</td>
        </tr>
        <tr>
            <td>Shashank Chugh</td>
            <td>shshankchugh@app.com</td>
            <td>Software Developer</td>
        </tr>
        <tr>
            <td>Akash Kumar</td>
            <td>akashkumar@app.com</td>
            <td>ML Engineer</td>
        </tr>
        <tr>
            <td>Shivam Jaiswal</td>
            <td>shivamjaiswal@app.com</td>
            <td>Ethical Hacker</td>
        </tr>
    </table>
  
    <script type="text/javascript">
  
        // 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');
            });
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.