使用Javascript onfocus在GridView中使用Chage LinkBut​​ton背景颜色

时间:2015-06-25 20:38:45

标签: javascript asp.net gridview focus highlight

我想在用户选中行并获得焦点并失去焦点时,在gridview中更改行的背景颜色。

我能够改变标签的前景色,(只是测试了这个),所以我相信它可以做到。

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

它可能看起来像:document.getElementById("<%= ....

但我相信你必须首先定义网格,然后是LinkBut​​ton。不知道如何做这个部分。

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

感谢所有帮助谢谢。

这是我的代码:

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

1 个答案:

答案 0 :(得分:0)

您可以通过this中的JavaScript对象和RowDataBound的{​​{1}}事件来实现此目的。伪代码。

asp:GridView

的JavaScript

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)");
    }
}

P.S:我在这里使用function setfocus(elm) { elm.style.color = "Red"; } function setblur(elm) { elm.style.color = "Blue"; } onmouseover