无法突出显示从 JavaScript 动态创建的 GridView 的行答案

【问题标题】：Can't highlight row for dynamically created GridView from JavaScript无法突出显示从 JavaScript 动态创建的 GridView 的行
【发布时间】：2011-06-14 18:45:06
【问题描述】：

以前很容易做到这一点，但这是我第一次动态生成 GridView。每个 GridView 单元格在创建时都有自己的 CSS 样式。在 RowDataBound 事件中，我照常设置突出显示：

e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer';HilightRow(this);")
e.Row.Attributes.Add("onmouseout", "HilightRow(this);")

在脚本方面，我有以下内容：

var curSelRow = null;
function HilightRow(row) {
    var selRow = row;
    var i;
        .
        .
    if (selRow != null) {
        curSelRow = selRow;
        curSelRow.style.backgroundColor = '#FFEEC2';
    }
}

我已经在脚本中跟踪了这一点，它工作正常，没有错误，当我在有问题的行上进行观察时，它确实正确显示了正确的背景颜色值（即 #FFEEC2），但是，悬停不会改变行的颜色。我很困惑。不知道为什么会发生这种情况，正如我所说，我之前做过很多次都没有问题，但过去网格视图不是动态的。

【问题讨论】：

标签： javascript gridview dynamic mouseover

【解决方案1】：

我不确定您是否已显示所有代码，但似乎 over 和 out 函数都设置了相同的 bgcolor (#FFEEC2)。

onmouseover 和 onmouseout 都在调用 HilightRow(this)。最初的 onmouseover 是否设置了 bgcolor？

【讨论】：

是的，最初的鼠标悬停设置颜色并复制以前的颜色（未显示），但我什至没有达到这一点，因为鼠标悬停从未设置初始颜色。

【解决方案2】：

我认为更好的解决方案是在行中添加一个类。像 class="Hilightrow"。并避免在 html 元素中使用脚本并将结构与行为分开。

  var hiliclass = "Hilightrow";
    var trhilight = document.getElementById("mytable").getElementsByTagName("tr"); 
    var len = trhilight.length; 
    for(var i=0;i<len;i++) {
        if(trhilight[i].className == hiliclass) {
            trhilight[i].onmouseover = function() {
                  trhilight[i].style.backgroundColor = "red"; 
           }
           .... 

}

    }

并将脚本放在一个函数中并在 window.onload 中调用它或使用这样的自调用函数：

 function highlightrows() {
   ..// my code 
   }();

【讨论】：

【解决方案3】：

我终于找到了问题所在。在设置突出显示之前，您需要做的是通过设置curSelRow.cells[i].style.backgroundColor = '' 将当前应用的样式删除到行中。现在您可以使用curSelRow.style.backgroundColor = '#FFEEC2' 突出显示该行，这会将该行设置为突出显示值。

此外，您必须在重置值之前保存每个单元格自己的样式，并在光标离开该行时恢复每个单元格的值。否则，您悬停的每一行都会显示为白色。同样，请记住在将每个单元格的样式设置为原来的样式之前重置突出显示行的样式。

好痛！

【讨论】：