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

使用jQuery：

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

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

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

Answer 2

有关更改显示样式属性，请参见此工作示例。 Link

TL; DR

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

Answer 3

首先，您可以通过在页面加载函数中添加onclick属性来绑定click事件以调用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";

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

3 个答案: