使用JQUERY显示'.hidden'元素

Question

I have this asp and HTML code:

 <asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
        <ItemTemplate>
            <div class="row1">
                <table style="cursor: pointer; width: 100%">
                    <tr>
                        <td rowspan="4">
                            <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
                                Height="32" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td rowspan="7">
                             <input type="button" class="toggleRow" value="B" style="height: 30px; position: relative; float: left;" />
                        </td>
                    </tr>
                    <tr>
                        <td>text:</td>
                        <td rowspan="4">
                            <h1 style="color: gray"><%# Eval("Text") %></h1>
                        </td>
                    </tr>
                    <tr class="hidden">
                        <td>text:</td>
                        <td><%# Eval("Text") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>X:</td>
                        <td><%# Eval("Lon") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>Y:</td>
                        <td><%# Eval("Lat") %></td>
                    </tr>
                    <tr>
                </table>
            </div>
        </ItemTemplate>      
    </asp:Repeater>

Javascript code:

        $('.toggleRow').on('click', function () {
            $(this).closest('table').children('.hidden').show();

            return false;
        });

When batten with class toggleRow clicked the javascript fired but I do not get any result (ie I expect the hidden row will be displayed but the not).

Any idea why?

Answer 1

Since you have a table and tr , even though you are not creating tbody the browser will put all the tr elements in a tbody , so your selector $(this).closest('table').children('.hidden').show(); will not be able to find the tr as children of the able.

So try

$(this).closest('table').find('tr.hidden').show();

You also will have to add the toggleRow class to the button

<input type="button" id="btnToggleRow" value="B" style="height: 30px; position: relative; float: left;" class="toggleRow"/>

Answer 2

To display the row which are hidden use below code.

$('.toggleRow').on('click', function () {
    $('.hidden').css("display","block");
    return false;
});