Question

I am creating elements in DOM using Javascript in my page like this

var myTd_1 = document.createElement("td")

and adding properties to them, say

myTd_1.width='25%'
myTd_1.padding = '6'

and I really want to add different background-color to the TD in case using onMouseOver
and onMouseOut events.

How can I do it ?

I tried looking for it on the net but could not really found what I need.

The closest I came up using what I know is :

myTd_1.onMouseOver = 'this.style.backgroundColor="#042b2b"'
myTd_1.onMouseOut = 'this.style.backgroundColor="transparent"'

But it’s not working 🙁

Answer 1

All you have to do is add event listeners to the element for the mouseover and mouseout events. You can do this using addEventListener:

var myTd_1 = document.createElement("td");

myTd_1.width='25%';
myTd_1.padding = '6';

document.getElementById('targetrow').appendChild(myTd_1);

myTd_1.addEventListener("mouseover",function(){
    this.style.backgroundColor="#042b2b";
});
myTd_1.addEventListener("mouseout",function(){
    this.style.backgroundColor="transparent";
});