• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 456
  • Last Modified:

Dynamic table row onmouseover goes to last row all the time

I'm trying to dynamically create a table row that has a mouse over.  The problem i have is that i can successfully create the table row but when i do a mouse over on any row it goes to the the once.  Here is part of the code that creates the table row:

        for(loopData = 0; loopData < data.GridRows.length; loopData++)

            var rowData = document.createElement("tr");
            rowID = div_grid_container + "_GridTable_DataRow" + loopData;
            rowData.setAttribute("id", rowID);
            if(backgroundColor == data.BackgroundColor)
                backgroundColor = data.AlternateBackgroundColor
                backgroundColor = data.BackgroundColor;
            rowData.onmouseover = function(){onMouseOverEvent(rowID, data.RowHightlightColor);}
            width = 0;
            for(loopColumn = 0; loopColumn < data.GridColumns.length; loopColumn++)
                if(data.GridColumns[loopColumn].Visible == true)
                    width += (+ data.GridColumns[loopColumn].Width);
                if(loopColumn == (data.GridColumns.length - 1))
                    if(this.get_controlWidth() > width)
                        difference = controlWidth - width;
                        difference = width - controlWidth;
                    width = data.GridColumns[loopColumn].Width + difference;                    
                    cellData = createGridDataRows(data, loopColumn, loopData, backgroundColor, width);  
                    cellData = createGridDataRows(data, loopColumn, loopData, backgroundColor);  

The function that is called on the mouse over is:
    onMouseOverEvent = function(row_id, color)
        var jsonData = "(" + _jsonGridData + ")";
        var data = eval(jsonData);
        var colorMatch;
        var tableRow = document.getElementById(row_id);
        var cells = tableRow.getElementsByTagName("td");

when i do the alert before the code that assings the onmouseover it correct.  but when i mouseover on the browser it pulls up the id of the last row all the time no matter what row i mouseover.

Any help would be appreciated

Thanks  in advance
  • 2
1 Solution
borg48Author Commented:
Just to add that the code that creates the table is define:

    this.generateGridDataControl = function(div_grid_container)

b/c its being generated from an outside class method
borg48Author Commented:
Never mind i figured it out.  I have to call a function within a function:
            rowData.onmouseover = function(a, b){return function(){
                onMouseOverEvent(a, b);
            }(rowID, data.RowHightlightColor)
            rowData.onmouseout = function(a, b){return function(){
                onMouseOutEvent(a, b);
            }(rowID, backgroundColor)
            rowData.onclick = function(a, b){return function(){
                onRowSelectEvent(a, b);
            }(rowID, div_grid_container + "_GridTable")
Because you have presented a solution to your own problem which may be helpful to future searches, this question is now PAQed and your points have been refunded.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now