Is there anyway to add hover effect to the table row elements using javascript

Question

I'm using javascript to add rows into my html table and coz of that I can't change style properties using css.

To add backgroud color I used

r = document.getElementById("table").insertRow();
r.style.background="flouralwhite"

But I couldn't find a way to change the background color when I hover on it. Is there a way to do it.

Answer 1

you can use use :-

const tableRow = document.createElement("tr");
// add td in it if you wish 
// add class to this row
tableRow.className = "hoverAble";

now in your css file add the styling -

hoverable:hover {
   background-colour:"flouralwhite";
}

I think this is what you are looking for .