Question

我正在尝试设计一个突出显示系统，用于突出显示html表格中鼠标悬停的行。我正在使用的代码如下所示，但由于某些原因它不起作用，请帮忙

<!-- 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>

但是，如果我将脚本更改为

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

然后它工作正常，但麻烦是我的表的一些行有一个红色背景表示付款的过期，当鼠标移出时这些行，行的背景颜色变回白色。如果移出鼠标，我需要能够将行的背景颜色恢复为原始颜色。

Answer 1

这应该有效：

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

很抱歉，我在编码时写了一个拼写错误，正确的脚本是

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

注意我是如何制作拼写错误并使用original = tbRow[i].style.backgroundColor;代替original = this.style.backgroundColor;代码工作正常，抱歉是误报。

获取背景颜色的Javascript代码无法正常工作

2 个答案: