Can't highlight row for dynamically created GridView from JavaScript

It use to be easy to do this, but this was my first time generating the GridView dynamically. Each GridView cell has its own CSS Styling when created. In RowDataBound event I set up the highlighting as usual:

开发者_StackOverflow

e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer';HilightRow(this);")
e.Row.Attributes.Add("onmouseout", "HilightRow(this);")

On the script side I have the following:

var curSelRow = null;
function HilightRow(row) {
    var selRow = row;
    var i;
        .
        .
    if (selRow != null) {
        curSelRow = selRow;
        curSelRow.style.backgroundColor = '#FFEEC2';
    }
}

I've traced this in the script and it works fine, there are no errors and when I do a watch on the row in question, it does correctly show the correct background color value (i.e. #FFEEC2), however, the hover does not change the color of the row. I'm puzzled. Not sure why this is happening and as I said, I've done this many times before without a problem but the gridviews were not dynamic in the past.

---

I'm not sure if you've shown all your code, but it appears that both the over and out function are setting the same bgcolor (#FFEEC2).

Both onmouseover and onmouseout are calling HilightRow(this). Does the initial onmouseover set the bgcolor?

---

A nicer solution I think is adding a class to the row. Like class="Hilightrow". And avoid script in the html-elements and separate structure from behaviour.

  var hiliclass = "Hilightrow";
    var trhilight = document.getElementById("mytable").getElementsByTagName("tr"); 
    var len = trhilight.length; 
    for(var i=0;i<len;i++) {
        if(trhilight[i].className == hiliclass) {
            trhilight[i].onmouseover = function() {
                  trhilight[i].style.backgroundColor = "red"; 
           }
           .... 

}

    }

And have the script inside a function and call it inside window.onload or use a self-invoking function like this:

 function highlightrows() {
   ..// my code 
   }(); 

---

I figured out the problem finally. What you have to do before you set the highlighting is to remove the currently applied Style to the row by setting the curSelRow.cells[i].style.backgroundColor = ''. Now you can highlight the row by using curSelRow.style.backgroundColor = '#FFEEC2', which will set the row to the highlight value.

In addition, you must save each cell's own style before you reset the values and restore each cells value when the cursor leaves that row. Otherwise you'll get white for each row that you hover over. Again, remember to reset the style for the highlighted row before you setting each cell's style to what it was originally.

What a pain!