Dynamic table row onmouseover goes to last row all the time

Posted on 2007-10-05
Last Modified: 2008-01-09
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
Question by:borg48

    Author Comment

    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

    Author Comment

    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")

    Accepted Solution

    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.


    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    Suggested Solutions

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now