How to Access <tr> element from Table using JavaScript ? Last Updated : 05 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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: html <!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 let row = item.path[1]; let row_value = ""; for (let 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> Output: Comment More infoAdvertise with us Next Article How to Access <tr> element from Table using JavaScript ? shivamsinghal1012 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Remove Column from HTML Table using JavaScript ? Given an HTML table and the task is to remove the certain column from the HTML table. There are two approaches that are discussed below: Approach 1: First, select the table and also get the rows of table using table.rows. Get the number of columns of a row and go through each one of the columns. Use 3 min read How to dynamically insert id into table element using JavaScript ? This article explains how to dynamically insert "id" into the table element. This can be done by simply looping over the tables and adding "id"s dynamically. Below are the approaches used to dynamically insert id into table elements using JavaScript: Table of Content Using classList ObjectUsing clas 3 min read How to hide the table header using JavaScript ? In this article, we will see the methods to hide the table header using JavaScript. There are two approaches that can help to hide a table header with the help of JavaScript. They are discussed below: Using style and display propertyUsing jQuery hide Method Approach 1: Select the header using a CSS 2 min read How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil 2 min read How to Create a Filter Table with JavaScript? Filter tables are commonly used in web applications to organize and display tabular data efficiently. It allows users to search and filter through large datasets easily. In this tutorial, we will go through the steps to create a filter table with JavaScript. ApproachFirst, create the basic HTML stru 3 min read Different ways to access HTML elements using JavaScript Sometimes, users need to manipulate the HTML element without changing the code of the HTML. In this scenario, users can use JavaScript to change HTML elements without overwriting them. Before we move ahead to change the HTML element using JavaScript, users should learn to access it from the DOM (Doc 7 min read How to remove all rows from a table in JavaScript ? Given an HTML document that contains an HTML table, the task is to remove all rows from the HTML table. Removing all rows is different from removing a few rows. This can be done by using JavaScript. Here we have two Approaches to removing all rows from a table: Table of Content Using remove() metho 2 min read JavaScript - Loop Through Table Cells using JS To loop through table cells in JavaScript, you can use various methods to iterate over the rows and cells in an HTML table. This allows you to manipulate or retrieve data from each cell as needed. Below are some practical approaches.1. Using the for LoopThe for loop is a simple and traditional way t 3 min read How to remove the table row in a table using JavaScript ? Removing a table row in JavaScript involves targeting the row element by its index or unique identifier, then using the remove() method to delete it from the DOM. This updates the table dynamically without requiring a page reload. This can be done in two ways: Table of Content JavaScript remove() Me 3 min read How to create table cell using HTML5 ? In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: html <!DOCTYPE html> <html> <head> 1 min read Like