1

我正在尝试设计一个突出显示系统，该系统将用于在鼠标悬停时突出显示 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>

然后它工作正常，但问题是我的表的某些行有红色背景，表示付款逾期，对于这些行，当鼠标移出时，行的背景颜色会变回白色。当鼠标移出时，我需要能够将行的背景颜色恢复为其原始颜色。

4

2 回答 2

2

这应该有效：

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);
    }
};
于 2013-09-24T18:38:43.597 回答
0

对不起，我在编码时打错了，正确的脚本是

 <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;代码工作正常抱歉误报。

于 2013-09-24T18:34:11.620 回答