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

Question

我有一个嵌套的 GridView，我将 <tr style="display:none"> 设置为仅显示主 GridView gvPosition。我想要做的是，一旦用户单击标签lblPosition，然后将显示属性更改为“初始”，它将显示第二个 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

首先，您可以通过在页面加载函数中添加onclick属性来绑定点击事件以调用JavaScript函数。

void Page_Load(object sender, EventArgs e) 
{
    lblPosition.Attributes.Add("onclick", "btnEditClick();");
}

要引用<td> 元素，您应该给它一个ID。让我们说：

<tr id="tr" style="display:none">

然后你可以有一个JavaScript函数来恢复<tr>的显示样式属性，如下所示：

<script type="text/javascript">
     function btnEditClick()
     {
         var btn = document.getElementById('tr');
         btn.style.display = "";
         return false;
     }
</script>

如果您更愿意将显示设置为初始，您可以这样做：

btn.style.display = "initial";

Answer 2

使用 jQuery：

$('#lblPosition').click(function() {
    $('tr').css('display', 'initial');
});

虽然我建议在您的 tr 中添加一个类，以免影响其他不相关的 tr。它看起来像

$('#lblPosition').click(function() {
    $('.someclass').css('display', 'initial');
});

Answer 3

查看这个关于更改显示样式属性的工作示例。 Link

TL;DR

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