Question

我有以下HTML代码

<table class="innerGridTable" cellpadding="0" cellspacing="0" width="100%">
    <tr id="trMain">
        <td>
            <asp:Button ID="btnOrgReport" CssClass="Button" runat="server" Text="Organisation Reports" />
        </td>
        <td>
            <asp:Button ID="btnCPUserReport" CssClass="Button" runat="server" Text="User Reports" />
        </td>
        <td>
            <asp:Button ID="btnTrainingEventReports" CssClass="Button" runat="server" Text="Training Event Reports" />
        </td>
        <td>
            <asp:Button ID="btnTokenManagementReport" CssClass="Button" runat="server" Text="Token Management Reports" />
        </td>
        <td>
            <asp:Button ID="btnLogBookReport" CssClass="Button" runat="server" Text="Log Book Reports" />
        </td>
    </tr>
    <tr id="trOrg">
        <td>
            <asp:Button ID="btnOrganisationReport" CssClass="Button" runat="server" Text="Organisation Report" />
        </td>

        <td>
            <asp:Button ID="btnOraganisationTotal" CssClass="Button" runat="server" Text="Total Organisation Report" />
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr id="trCPUser">
        <td>
            <asp:Button ID="btnCPUser" CssClass="Button" runat="server" Text="CP User" />
        </td>

        <td>
            <asp:Button ID="btnCPUserSubTotal" CssClass="Button" runat="server" Text="CP User Sub Total Report" />
        </td>
        <td>
            <asp:Button ID="btnContactPointUserHistory" CssClass="Button" runat="server" Text="ContactPoint User History Report" />
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>

    <tr id="trTraining">
        <td>
            <asp:Button ID="btnTrainingCourse" CssClass="Button" runat="server" Text="Training Course" />
        </td>

        <td>
            <asp:Button ID="btnTrainingCourseTrainer" CssClass="Button" runat="server" Text="Training Course Trainer" />
        </td>

        <td>
            <asp:Button ID="btnTrainingCourseDelegate" CssClass="Button" runat="server" Text="Training Course Delegate" />
        </td>

        <td>
            <asp:Button ID="btnTrainingVenue" CssClass="Button" runat="server" Text="Training Course Venue" />
        </td>
        <td>
        </td>

    </tr>
</table>

现在我想隐藏按钮点击。让我举一个上面代码的例子

如果你看到第一个 tr id =“trMain”中有五个主按钮。 “btnOrgReport”，“btnCPUserReport”，“btnTrainingEventReports”，“btnTokenManagementReport”，“btnLogBookReport”及以下是子 tr ，它将根据主按钮上的点击显示。

如果我点击“btnOrgReport”，那么它会隐藏所有其他孩子 tr id =“trCPUser”，id =“trTraining”并且只会显示 tr id =“trOrg”如果用户点击 btnCPUserReport ，则只会出现 tr id =“trCPUser”，其他tr将被隐藏。

请建议使用Jquery。

谢谢，

最诚挚的问候，

溶胶

Answer 1

<asp:Button ID="btnOrgReport" CssClass="Button" runat="server" 
Text="Organisation Reports" OnClientClick="hideRow('trOrg');" />

function hideRow(r){
    $("table.innerGridTable tr").hide();
    $("table.innerGridTable tr#"+r).hide();

    return false;
}

但是你可能需要另一个按钮（外面的表可能？）点击所有行将被恢复：

<input id="ShowAll" type="Button" text="SShowAll"/>

$("#ShowAll").click(function(){$("table.innerGridTable tr").show();});

如何在按钮上隐藏完整的tr单击JQuery

1 个答案: