Highlight the row of a table on mouseover using Javascript and CSS

Question

Below is are the functions I'm using in order to highlight a row being hovered over. I am having trouble understanding how this can be achieved when my goal is to select the tbodies from the stripe_table class. Once this is set as the event listener, I need to have the a and td nodeNames respond to the mouseover event and thus highlight their parent row. Can someone explain the steps that would allow this to be accomplished? How would I traverse the DOM from the hovered a or td element to find its parent row? Thanks! Set tbody as eventlistener on mouseover and mouseout reacts to a and td elements-->modifies tr --find the target element’s ancestor table row --so that you apply the highlighting to that table row --To traverse the DOM run a loop that resets the event --target element to its parent node until the node name of the --parent is equal to On mouseout event, need to restore the formatting*/ ``` //Set up Hover Events function addEvent( obj, type, fn ) { if ( obj.attachEvent ) {…

Accepted Answer

Have you tried just using the CSS e.g.

```
tr:hover{
 background:red;
}
```

If you want to use jQuery, there's a pretty decent walkthrough here, if you want pure JS- take a look here under the section 'Using Mouse Event Handler and Row Detection'

Highlight the row of a table on mouseover using Javascript and CSS

Solution

Problem