How to get table data in html

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 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:

Output: