javascript - 如何使用 jquery 显示/隐藏 ListView 的行

Question

我正在使用 Asp.net Listview 在“网格”中显示数据。这是我的代码

  <asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id">
            <ItemTemplate>
                <table style="width: 100%;">
                    <tr style="width: 100%; border-bottom:1px solid gray;">
                        <td class="colonna-griglia">
                            <a href="#" ..'here javascript'>Expand/Hide Div</a><br /><br />
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("rivista")%>
                        </td>
                        <td class="colonna-griglia">
                            <a href='dmr.aspx?cliente=<%# Eval("cliente")%>'>
                                <%# Eval("cliente")%></a>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("categoria")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("sottocategoria")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("prodotto")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("formato")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("posizionamento")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("spazio")%>
                        </td>
                        <td class="colonna-griglia">
                            <%# Eval("id")%>
                        </td>
                    </tr>
                </table>
                <div runat="server" id="divDetail" class="toggle1" style="display:none;padding: 5px 5px 5px 5px; background-color:#DEDEDE;">
                    Dettaglio
                </div>
            </ItemTemplate>
            <EmptyDataTemplate>
                <table id="Table1" runat="server" style="">
                    <tr>
                        <td>
                            <br />
                            <br />
                            <asp:Label ID="lblNoPost" runat="server" Font-Size="Large" Font-Bold="true" Text="Non ci sono record !"> </asp:Label>
                            <br />
                            <br />
                        </td>
                    </tr>
                </table>
            </EmptyDataTemplate>
            <LayoutTemplate>
                <table id="Table2" runat="server" style="width: 100%;" cellpadding="2" cellspacing="2">
                    <thead>
                        <tr runat="server" id="headerRow"  >
                            <th class="colonna-griglia">

                            </th>
                            <th class="colonna-griglia">
                                Rivista
                            </th>
                            <th class="colonna-griglia">
                                Cliente
                            </th>
                            <th class="colonna-griglia">
                                Categoria
                            </th>
                            <th class="colonna-griglia">
                                Sottocategoria
                            </th>
                            <th class="colonna-griglia">
                                Prodotto
                            </th>
                            <th class="colonna-griglia">
                                Formato
                            </th>
                            <th class="colonna-griglia">
                                Posizionamento
                            </th>
                            <th class="colonna-griglia">
                                Spazio
                            </th>
                            <th class="colonna-griglia">
                                id
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr runat="server" id="itemPlaceholder" />
                    </tbody>
                    <tr id="Tr3" runat="server">
                        <td id="Td2" runat="server" style="text-align: center; font-size: medium;">
                            <br />
                            <asp:DataPager ID="DataPager1" runat="server" PageSize="24" QueryStringField="page">
                                <Fields>
                                    <asp:NumericPagerField ButtonType="Link" NumericButtonCssClass="PageNumber" NextPreviousButtonCssClass="PageNumber"
                                        NextPageText="Next" PreviousPageText="Prev" CurrentPageLabelCssClass="PageNumberCurrent" />
                                </Fields>
                            </asp:DataPager>
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>

我想允许用户在每行下方显示/隐藏 div divDetail(如主详细信息)，单击每行附近的图标/按钮。

问题是每个 div 在 asp.net 呈现后更改了他的名字(因为我使用 runat=server)。那么我如何使用 jquery 或 javascript 来显示仅隐藏正确行下的 div？

这可能吗？

谢谢

Answer 1

您需要使用正确的 jQuery 选择器来实现此目的。我使用了以下方法，并且有效。

在 ListView 中使用它。

<asp:ListView ID="lvDmr" runat="server"  DataKeyNames="id">
    <ItemTemplate>
        <table style="width: 100%;">
            <tr style="width: 100%; border-bottom: 1px solid gray;">
                <td class="colonna-griglia">
                    <a href="#" onclick='ShowHide(this);'>Expand/Hide Div</a><br />
                    <br />

看，我使用了 ShowHide 。然后使用下面的 JS 函数。

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
    function ShowHide(element) {
        $(element).parent().parent().parent().parent().next().toggle();
    }
</script>

确保包含 jQuery ，任何版本都可以，我使用的是 2.1.1。

输出如下。

JS 的解释 - a href 在表内向下 4 层，即 table->tbody->tr->td，所以我使用了 .parent () 4次，然后使用.next获取下一个div即divDetail。然后调用 toggle() 使其工作。