javascript - 如何使用 jQuery/Javascript 更改 gridview 中的 <tr> 属性

Question

我有一个嵌套的 GridView，我设置 <tr style="display:none">仅显示主 GridView gvPosition 。我想要做的是，一旦用户单击标签 lblPosition ，然后将显示属性更改为“initial”，然后它将显示第二个GridView gvInput包含用于输入内容的文本框。

我对 jQuery 和 Javascript 还很陌生，我需要一些帮助!

非常感谢!

<asp:GridView runat="server" ID="gvPosition"
        DataKeyNames="Position" EmptyDataText="No Data Returned" 
        AutoGenerateColumns="false" OnRowDataBound="gvPosition_RowDataBound" SkinID="Grid">
        <Columns> 
            <asp:TemplateField HeaderText ="Position">
                <ItemTemplate>
                    <asp:Label ID="lblPosition" Font-Bold="true" runat="server" Text='<%# Eval("Position")%>' />
                </ItemTemplate>
            </asp:TemplateField>            
            <asp:BoundField DataField="Surplus" HeaderText="Surplus" />
            <asp:BoundField DataField="Total Credits" HeaderText="Total Credits" />

            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Button runat="server" ID="btnEdit" Text="Edit" CssClass="btn btn-primary" CommandName="EditButton" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
                    <tr style="display:none">
                        <td></td>
                        <td colspan="100">
                            <asp:Panel ID="pnlInputs" runat="server">
                                <asp:GridView ID="gvInput" runat="server" AutoGenerateColumns="false" SkinID="Grid">
                                    <Columns>

                                        <asp:TemplateField HeaderText="PCredit: ">
                                            <ItemTemplate>
                                               <asp:TextBox ID="tbPC" runat="server" Text='<%# Eval("PCredit") %>' CssClass="form-control" />
                                            </ItemTemplate>
                                        </asp:TemplateField>

                                        <asp:TemplateField HeaderText="Heads: ">
                                            <ItemTemplate>
                                                <asp:TextBox ID="tbHeads" runat="server" Text='<%# Eval("BA") %>' CssClass="form-control" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </asp:Panel>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>

        <RowStyle HorizontalAlign="Center" />
        <SelectedRowStyle HorizontalAlign="Center" />

    </asp:GridView>

Answer 1

请参阅有关更改显示样式属性的工作示例。 Link

TL;博士

  document.getElementById("some_id").style.display = "initial";