c# - 如何更改行 MouseOver 上的 GridView 单元格颜色

Question

我有一个 GridView，我想在鼠标悬停在该行上时更改单元格颜色。我尝试了以下方法:

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#c8e4b6'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");
e.Row.Cells[1].Attributes.Add("onmouseover", "this.style.backgroundColor='green'");
e.Row.Cells[1].Attributes.Add("onmouseout", "this.style.backgroundColor='white'");

行颜色完美改变。但只有当鼠标移到该单元格上时，单元格颜色才会改变。

有没有办法在鼠标位于行时更改单元格颜色？

Answer 1

我认为您必须在鼠标悬停在事件处理程序上时设置 Cells[1] 的样式。

你不应该设置单元格的 onmouseover 和 onmouseout 属性，因为这只会在你将鼠标悬停在它上面时起作用，而不是在整行上。

下面的代码将描述更多:

我有 GridView 名称 GridView1，我有 Javascript 函数来处理鼠标悬停和鼠标移出事件，如下所示

<script type="text/javascript" >
    function onMouseOver(rowIndex) {
        var gv = document.getElementById("GridView1");
        var rowElement = gv.rows[rowIndex];
        rowElement.style.backgroundColor = "#c8e4b6";
        rowElement.cells[1].style.backgroundColor = "green";
    }

    function onMouseOut(rowIndex) {
        var gv = document.getElementById("GridView1");
        var rowElement = gv.rows[rowIndex];
        rowElement.style.backgroundColor = "#fff";
        rowElement.cells[1].style.backgroundColor = "#fff";
    }
</script>

在 RowDataBound 事件处理程序中，尝试将属性 onmouseover 和 onmouseout 添加到所有行，由 Javascript 函数处理，onMouseOver 和 onMouseOut

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
       e.Row.Attributes["onmouseover"] = "onMouseOver('" + (e.Row.RowIndex + 1) + "')";
       e.Row.Attributes["onmouseout"] = "onMouseOut('" + (e.Row.RowIndex + 1) + "')";
    }
}

GridView 标签应该是这样的:

<asp:GridView ID="GridView1" runat="server" ...  OnRowDataBound="GridView1_RowDataBound">

希望对您有所帮助。