how to hide complete tr on the button click through JQuery

Question

hi,

I have below HTML code

<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>

Now I want to hide on button click. Let me give one example from above code

if you see there are five master buttons in first tr id="trMain". "btnOrgReport", "btnCPUserReport", "btnTrainingEventReports", "btnTokenManagementReport", "btnLogBookReport" and below are the child tr which will appear according the click on the master buttons.

say if I click "btnOrgReport" then it will hide all other child tr id="trCPUser", id="trTraining" and will only show tr id="trOrg" and if user clicks on btnCPUserReport then only tr id="trCPUser" will appear and other tr will be hidden.

Please suggest using Jquery.

Thanks,

Best Regards,

Sol

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;
}

but you may need another button (outside table maybe?) on clicking which all the rows will be restored:

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

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