Show Hide Controls inside ASP.Net GridView Row on mouseover using jQuery

Hi imoleayoemman...,

You need to put the TextBox and Button inside the ItemTemplate instead of EditItemTemplate.

Then, on mouse hover show the TextBox and Button, and hide the Label.

Same on mouse out hide the TextBox and Button, and show the Label.

Refer below example.

HTML

<asp:GridView ID="gvMList" runat="server" AutoGenerateColumns="False" CssClass="table table-bordered">
    <Columns>
        <asp:TemplateField HeaderText="Subject">
            <ItemTemplate>
                <div id="dvItem" style="display: block;">
                    <asp:Label ID="lbls" runat="server" Text='<%# Eval("subject") %>'></asp:Label>
                </div>
                <div id="dvEdit" style="display: none;">
                    <asp:TextBox ID="txts" CssClass="form-control" runat="server"></asp:TextBox>
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Save" CssClass="btn btn-success" />
                    <asp:Button ID="Button2" runat="server" Text="Delete" CssClass="btn btn-danger" />
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="teacher" HeaderText="Teacher" />
    </Columns>
</asp:GridView>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=gvMList] td").hover(function () {
            $("td", $(this).closest("tr")).find($("[id*=dvItem]")).hide();
            $("td", $(this).closest("tr")).find($("[id*=dvEdit]")).show();
        }, function () {
            $("td", $(this).closest("tr")).find($("[id*=dvItem]")).show();
            $("td", $(this).closest("tr")).find($("[id*=dvEdit]")).hide();
        });
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.Add("Subject");
        dt.Columns.Add("Teacher");
        dt.Rows.Add("Math", "John");
        dt.Rows.Add("Chemistry", "Mudassar");
        dt.Rows.Add("Physics", "Robert");
        gvMList.DataSource = dt;
        gvMList.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.Add("Subject")
        dt.Columns.Add("Teacher")
        dt.Rows.Add("Math", "John")
        dt.Rows.Add("Chemistry", "Mudassar")
        dt.Rows.Add("Physics", "Robert")
        gvMList.DataSource = dt
        gvMList.DataBind()
    End If
End Sub

Screenshot