切换使用Repeater Control ASP.NET创建的行

时间:2009-04-02 12:02:58

标签: asp.net jquery

我正在使用Repeater Control创建数据列表。某些行可能包含其他行,应使用主行的可单击图像进行切换。

这是HTML部分

<table cellpadding="2" cellspacing="0" width="100%">
                <asp:Repeater ID="repeatLockers" runat="Server">
                    <HeaderTemplate>
                        <tr>
            <td>&nbsp;</td>
                            <td>A</td>
                        </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr id="trItem" class="SomeParentClass" runat="server">
                            <td>
                                <img id="imgToggleHomeInfo" runat="server" alt="show/hide repetitves" src="icon_plus.gif"
                                    style="cursor: pointer" />
                            </td>
                            <td>
                                <asp:Label ID="lbl" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr id="trAddOnFee" runat="server" class="SomeClass" style="display: none;">
                            <td colspan="2">
                                <table cellpadding="4" cellspacing="2" width="100%">
                                    <tr>
                                        <td class="DgHeader">A</td>
                                        <td class="DgHeader">B</td>
                                    </tr>
                                    <asp:Repeater ID="repeatRepetitives" runat="server">
                                        <ItemTemplate>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="lblA" runat="server"></asp:Label>
                                                </td>
                                                <td align="right"> 
                                                    <asp:Label ID="lblB" runat="server"></asp:Label>
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </table>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </table>

如何使用Jquery在其父行上单击imgToggleHomeInfo“图像时,将类与”SomeClass“切换为”SomeClass“?

1 个答案:

答案 0 :(得分:1)

我会找到图像的父行然后切换它的下一个兄弟。

$(document).ready( function() {
    $("[id$='imageToggleHomeInfo']").click( function() {
        $(this).closest('tr').next().toggle();
    });
})