Question

document.onmouseover= function(event) {
    if (event===undefined) event= window.event;                     
    var target= 'target' in event? event.target : event.srcElement; 
    if(target.tagName == 'TR') {            
            target.style.backgroundColor = 'red';
        }else{
            target.style.backgroundColor = "yellow";
        }
};
document.onmouseout= function(event) {
    if (event===undefined) event= window.event;                     
    var target= 'target' in event? event.target : event.srcElement; 
    target.style.backgroundColor = "transparent";
};

TR elements never highlight nor does onmouseover event fire for this. TD elements work fine. What explains this behavior and how can I make onmouseover fire when it touches TR element?

Answer 1

How about changing your code to:

var rows = document.getElementsByTagName('TR');
for (var i = 0, l = rows.length; i < l; i++) {
  rows[i].onmouseover = function (event) {
    this.style.backgroundColor = 'red';
  }

  rows[i].onmouseout = function (event) {
    this.style.backgroundColor = "transparent";
  }
}

Demo: http://jsfiddle.net/Asv4v/3/