Javascript 在gridview行鼠标上方，我想在另一个标签中显示行数据

当用户将鼠标移到gridview行上时，我希望在另一个面板中显示该行的详细信息。我怀疑通过背后的代码实现这一点是不可能的，所以我希望使用javascript

对于这个简单的示例，当鼠标移到行上时，我希望在“lblIdDetail”和“lblNameDetail”中显示用户的id和名称：

 <asp:GridView ID="GridView1" runat="server" EnableModelValidation="True" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblId" Text=<%# Bind("id") %> runat="server"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblName" Text=<%# Bind("name") %> runat="server"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:Panel ID="pnlDetails" runat="server">
        <asp:Label ID="Label1" runat="server" Text="The hovered Id is: "></asp:Label>
        <asp:Label ID="lblIdDetail" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:Label ID="Label3" runat="server" Text="The hovered name is: "></asp:Label>
        <asp:Label ID="lblNameDetail" runat="server" Text="Label"></asp:Label>
    </asp:Panel>

我对javascript的使用非常缺乏经验，因此我希望能得到尽可能详细的答案。

---

谢谢：-）

您可以在RowDataBound事件中添加鼠标悬停事件，如下所示：

//pass the needed row contens into showContents
e.Row.Attributes["onmouseover"] = "showContents(arg1, arg2, arg3)"; 

---

我会为要在标签中显示的列添加数据键，在RowDataBound事件中提取值，并将它们传递到showContents JS函数中。

您可以在RowDataBound事件中添加鼠标悬停事件，如下所示：

//pass the needed row contens into showContents
e.Row.Attributes["onmouseover"] = "showContents(arg1, arg2, arg3)"; 

---

我会为要在标签中显示的列添加数据键，在RowDataBound事件中提取值，并将它们传递到showContents JS函数。

在Jame的帮助下，我拼凑出了我想要的功能。提供的代码示例将用数据填充gridview，有些是可见的，有些是隐藏的。将鼠标悬停在一行上时，隐藏数据将显示在下面，用于显示比gridview中更多的详细信息：

<script type="text/javascript">

window.onload = hideColumns;

    function hideColumns() {
    var gv = document.getElementById("GridView1");
    for (var i = 0; i < gv.rows.length; i++) {
        gv.rows[i].cells[1].style.display = "none";
    }
}

function showContents(rowIndex) {


    var gv = document.getElementById("GridView1");
    var rowElement = gv.rows[rowIndex];
    var id = rowElement.cells[0].innerHTML;
    document.getElementById('lblIdDetail').innerHTML = id;
    var name = rowElement.cells[1].innerHTML;
    document.getElementById('lblNameDetail').innerHTML = name;

}
</script>

---

在Jame的帮助下，我拼凑出了我想要的功能。提供的代码示例将用数据填充gridview，有些是可见的，有些是隐藏的。将鼠标悬停在一行上时，隐藏数据将显示在下面，用于显示比gridview中更多的详细信息：

<script type="text/javascript">

window.onload = hideColumns;

    function hideColumns() {
    var gv = document.getElementById("GridView1");
    for (var i = 0; i < gv.rows.length; i++) {
        gv.rows[i].cells[1].style.display = "none";
    }
}

function showContents(rowIndex) {


    var gv = document.getElementById("GridView1");
    var rowElement = gv.rows[rowIndex];
    var id = rowElement.cells[0].innerHTML;
    document.getElementById('lblIdDetail').innerHTML = id;
    var name = rowElement.cells[1].innerHTML;
    document.getElementById('lblNameDetail').innerHTML = name;

}
</script>

---

谢谢你的帮助！如果有兴趣，请在我的答案中提供完整的代码谢谢您的帮助！如果有兴趣，请在我的答案中提供完整代码

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable sampleData = new DataTable();
            sampleData.Columns.Add("id");
            sampleData.Columns.Add("name");


            sampleData.Rows.Add("1", "Dave");
            sampleData.Rows.Add("2", "John");
            sampleData.Rows.Add("3", "Jacob");
            sampleData.Rows.Add("4", "Smith");

            GridView1.DataSource = sampleData;
            GridView1.DataBind();


        }
    }

    protected void setMouseover(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowIndex != -1)
        {
            e.Row.Attributes["onmouseover"] = "showContents('" + (e.Row.RowIndex +1)+ "')";

        }
    }