使用Javascript onfocus更改GridView中的链接按钮背景颜色答案

【问题标题】：Chage LinkButton background color in GridView using Javascript onfocus使用Javascript onfocus更改GridView中的链接按钮背景颜色
【发布时间】：2023-03-31 17:10:01
【问题描述】：

当用户在行中切换并获得焦点并失去焦点时，我正在尝试更改 gridview 中行的背景颜色。

我能够改变标签的前景色，（只是在测试这个）所以我相信它可以做到。

我需要帮助编写将捕获表行的两个标题的 ClientID 的 javascript。

它可能看起来像：document.getElementById("

但我相信您必须先定义网格，然后再定义 LinkButton。不知道如何做这部分。

我下面的代码将更改标签前景色，请记住我想更改标题和项目模板的背景色。

感谢所有帮助。

这是我的代码：

<script type="text/javascript">
    function setheaderfocus() {
        document.getElementById("<%=Label1.ClientID %>").style.color = "Red";  //works
    }
    function setheaderblur() {
        document.getElementById("<%=Label1.ClientID %>").style.color = "Blue"; //works
    }
</script> 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>GridView Select Example</title>
</head>
<body>
<form id="form1" runat="server">

    <asp:Label ID="Label1" runat="server" Text="Test" ></asp:Label>

    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                 <asp:LinkButton ID="Button2" runat="server" 
                     onfocus="setheaderfocus()" 
                     onblur="setheaderblur()"                       
                     Text="New" />
            </HeaderTemplate>
            <ItemTemplate>
                 <asp:LinkButton ID="Button1" runat="server" 
                     onfocus="setrowfocus()" 
                     onblur="setrowblur()" 
                     Text="Edit" />
            </ItemTemplate>
        </asp:TemplateField>
     </Columns>

    <asp:sqldatasource id="YourSource"
    selectcommand="SELECT * FROM &quot;TBL_YOUR_DATA&quot;"
    connectionstring="<%$ ConnectionStrings:ConnectionString %>" 
    runat="server" ProviderName="<%$ YOUR_PROVIDER %>"/>

</form>
</body>
</html>

【问题讨论】：

标签： javascript asp.net gridview focus highlight

【解决方案1】：

您可以通过组合JavaScript 中的this 对象和asp:GridView 的RowDataBound 事件来实现此目的。伪代码。

protected void ParticipantsGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Attributes.Add("onmouseover", "setfocus(this)");
        e.Row.Attributes.Add("onmouseout", "setblur(this)");
    }
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onmouseover", "setfocus(this)");
        e.Row.Attributes.Add("onmouseout", "setblur(this)");
    }
}

JavaScript

function setfocus(elm) {
    elm.style.color = "Red";
}
function setblur(elm) {
    elm.style.color = "Blue";
}

P.S：我在这里使用onmouseover 和onmouseout。

【讨论】：

感谢您的回复。
感谢您的回复。我不确定这将如何工作？？？当用户使用 tab 键（不使用鼠标）滚动行时，LinkButton“onfocus”调用 javascript 函数“setheaderfunction”，该函数告诉发生 rowdatabound 事件。不确定。我正在寻找一个可以查明具有焦点并更改颜色的 gridview 行属性的 javascript。