onmouseover 和 onmouseout 无法正常工作

Question

protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //btnTargetEmp.Attributes.Add("onmouseover", "alert('hi')");
        //btnTargetEmp.Attributes["onmouseover"] = "alert(no)";
        e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView2, "Select$" + e.Row.RowIndex);
        e.Row.ToolTip = "Click to select this row.";
        //string onmouseoverStyle = "this.style.backgroundColor='blue'";
        ////string onmouseoutStyle = "this.style.backgroundColor='lightbrown'";
        //string onmouseoverStyle1 = "this.style.backgroundColor='green'";
        //string onmouseoutStyle1 = "this.style.backgroundColor='lightbrown'";
        ////e.Row.Attributes.Add("onmouseover", onmouseoverStyle1);
        //e.Row.Attributes.Add("onmouseout", onmouseoutStyle1);
        e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='firebrick',this.style.cursor='pointer'");
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor");
        //e.Row.Attributes.Add("onmouseover", onmouseoverStyle);
        //e.Row.Attributes.Add("onmouseout", onmouseoutStyle1);
        //e.Row.BackColor = ColorTranslator.FromHtml("#f1c365"); 

    }
}

当我从 gridview 中 select 行时，它工作正常，但是当我再次打开 gridview 时，之前 selected 的行仍然是 selected 并且它的颜色改变了，我不想要这个.请帮忙。这是我在弹出窗口中的 gridview .aspx 文件代码。

     <asp:ModalPopupExtender ID="ModularPopupExtender2" runat="server" BehaviorID="modalbehavior2" PopupControlID="panel2"  TargetControlID="btnTargetEmp" CancelControlID="HyperLink1" BackgroundCssClass="Background2" OnCancelScript="clickCancel();"></asp:ModalPopupExtender>

        <asp:Panel ID="panel2" runat="server"  CssClass="Popup2" align="center">
            <asp:Button ID="btnTargetEmp" runat="server" Text="OK" style="display:none;"/>
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass="ClosePopupCls" Font-Size="Large"><b>[x]</b></asp:HyperLink>
<h3 id="h1"> <b> EMPLOYEES RECORD </b></h3>
            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" OnSelectedIndexChanged="GridView2_SelectedIndexChanged" OnRowDataBound = "OnRowDataBound" >



                <Columns>
                    <asp:BoundField DataField="CAANO" HeaderText="CAANO" ReadOnly="True" SortExpression="CAANO" />
                    <asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
                    <asp:BoundField DataField="DESIGNATION" HeaderText="DESIGNATION" SortExpression="DESIGNATION" />
                    <asp:BoundField DataField="PG" HeaderText="PG" SortExpression="PG" />
                </Columns>

                <FooterStyle BackColor="#CCCCCC" />
                <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                <SortedAscendingHeaderStyle BackColor="#808080" />
                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                <SortedDescendingHeaderStyle BackColor="#383838" />

            </asp:GridView>


        </asp:Panel>

Answer 1

一点点 jquery 和 2 种款式就足够了。

Jquery:

$('tr.row').click(
    function () {
     //your click code
    }).hover(
    // add/remove css class to highlight on mouse over/out
    function () { $(this).addClass('row-highlight'); },
    function () { $(this).removeClass('row-highlight'); });

修改您的网格视图

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
OnSelectedIndexChanged="GridView2_SelectedIndexChanged" 
OnRowDataBound = "OnRowDataBound" RowStyle-CssClass="row">

你的 css 风格：

tr.row { 
   background-color:white;
} 
tr.row-highlight {  
   background-color: 'firebrick';
   cursor:pointer;
}

您现在可以在属性后面注释掉您的代码。

onmouseover 和 onmouseout 无法正常工作

onmouseover and onmouseout not working properly

asp.net

gridview