如何在gridview行单击下显示div标签

Question

我想在div标签中显示所选用户信息，我在gridview下面，当用户点击该行下面的gridview选择行时，我想显示用户信息。

Answer 1

这可以通过一点点jQuery来实现。我希望下面的答案可以帮助你

代码背后：

protected void Page_Load(object sender, EventArgs e)
{
    var users = new List<object>();

    users.Add(new { Name = "Name 1", Surname = "Surname 1" });
    users.Add(new { Name = "Name 2", Surname = "Surname 2" });
    users.Add(new { Name = "Name 3", Surname = "Surname 3" });
    users.Add(new { Name = "Name 4", Surname = "Surname 4" });
    users.Add(new { Name = "Name 5", Surname = "Surname 5" });
    users.Add(new { Name = "Name 6", Surname = "Surname 6" });
    users.Add(new { Name = "Name 7", Surname = "Surname 7" });
    users.Add(new { Name = "Name 8", Surname = "Surname 8" });
    users.Add(new { Name = "Name 9", Surname = "Surname 9" });
    users.Add(new { Name = "Name 10", Surname = "Surname 10" });

    gvUsers.DataSource = users;
    gvUsers.DataBind();
}

<强> ASPX：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="WebApplication6.Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var gridId = "<%= gvUsers.ClientID %>";
            var rowClickEvent = "#" + gridId + " tr"
            var current = "";

            $("#" + gridId).on("click", "span.close", function () {
                //Remove the row when user click on X
                $(this).parent().parent().empty();
            });

            $(rowClickEvent).click(function () {
                //Add row containing aditional info when user click on a row inside the grid view
                var row = this;
                var name = row.children[0].innerHTML;
                var surname = row.children[1].innerHTML;

                if ((name + surname) != current) {
                    $("<tr style='background-color:yellow;'><td style='height:200px;vertical-align:top;'>Dear " + name + " " + surname + "<br />Your Account Was Created Successfully<td><td style='vertical-align:top;'><span class='close'>X</span></td></tr>").insertAfter(row);
                }

                current = name + surname;
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="gvUsers" runat="server">
    </asp:GridView>
</asp:Content>

<强>输出：