Javascript code to get the background color is not working

Question

I am trying to design a highlighting system that will be used to highlight rows in a html table on mousehover The code I am using is given below, but for some reason it doesn't work, please help

<!-- Row Highlight Javascript -->
        <script type="text/javascript">
            window.onload=function()
            {
                var tfrow = document.getElementById('tfhover').rows.length;
                var tbRow=[];
                var original;
                for (var i=1;i<tfrow;i++)
                {
                    tbRow[i]=document.getElementById('tfhover').rows[i];

                    tbRow[i].onmouseover = function()
                    {
                        original = tbRow[i].style.backgroundColor;
                        this.style.backgroundColor = '#f3f8aa';

                    };
                    tbRow[i].onmouseout = function()
                    {
                        this.style.backgroundColor = original;

                    };
                }
            };
        </script>

However if I change the script to

<script type="text/javascript">
            window.onload=function()
            {
                var tfrow = document.getElementById('tfhover').rows.length;
                var tbRow=[];
                for (var i=1;i<tfrow;i++)
                {
                    tbRow[i]=document.getElementById('tfhover').rows[i];

                    tbRow[i].onmouseover = function()
                    {

                        this.style.backgroundColor = '#f3f8aa';

                    };
                    tbRow[i].onmouseout = function()
                    {
                        this.style.backgroundColor = '#fff';

                    };
                }
            };
        </script>

Then it works fine but then the trouble is some of the rows of my table has a red background to denote overdue of payment and for such rows when the mouse is moved out the background color of the row changes back to white. I need to be able to revert the background color of the row back to its original color when the mouse if moved out.

Answer 1

This should work:

window.onload = function() {
    // cache your dom queries
    var tfhover = document.getElementById('tfhover');
    var tfrow = tfhover.rows.length;
    var tbRow = [];
    for (var i=1; i<tfrow; i++) {
        // wrap your logic in a closure
        // otherwise original is not what you think it is
        (function(index) {
            var original;
            tbRow[index] = tfhover.rows[index];
            tbRow[index].onmouseover = function() {
                original = this.style.backgroundColor;
                this.style.backgroundColor = '#f3f8aa';
            };
            tbRow[index].onmouseout = function() {
                this.style.backgroundColor = original;
            };
        })(i);
    }
};

Answer 2

Sorry folks I made a typo while coding, the correct script is

 <script type="text/javascript">
            window.onload=function()
            {
                var tfrow = document.getElementById('tfhover').rows.length;
                var tbRow=[];
                var original;
                for (var i=1;i<tfrow;i++)
                {
                    tbRow[i]=document.getElementById('tfhover').rows[i];

                    tbRow[i].onmouseover = function()
                    {
                        original = this.style.backgroundColor;
                        this.style.backgroundColor = '#f3f8aa';

                    };
                    tbRow[i].onmouseout = function()
                    {
                        this.style.backgroundColor = original;

                    };
                }
            };
        </script>

Notice how I had made the typo and used original = tbRow[i].style.backgroundColor; instead of original = this.style.backgroundColor; The code is working fine sorry for the false alarm.