如何使用jQuery在表中显示隐藏行？

Question

我有这张桌子：

<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" id="btnToggleRow" value="B" style="height: 30px; position: relative; float: left;" />
                            </td>
                        </tr>
                        <tr class="textDesc">
                            <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>

这是我尝试使用的jQuery：

        $('.toggleRow').on('click', function () {



            return false;
        });

在这里看起来如何：

正如您所看到的那样，每行有3个元素图像文本和按钮。此外，我在表格中有隐藏的行。

当按下 B 按钮时，我需要触发上面的jQuery函数。

内部函数我需要获取所有隐藏的行并使它们可见，并使textDesc类具有不可见的行。

我该如何实施？

Answer 1

你有jquery函数.show(); , .hide(); , .toggle();，这与你的想法非常相似。

将它们附加到您想要显示/隐藏的元素。

例如：

 $('.toggleRow').click(function(){
     $('.toggleRow').toggle();
 });