how to hide complete tr on the button click through JQuery
<p>I have below HTML code</p>

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

     &lt;td&gt;
      &lt;asp:Button ID="btnOraganisationTotal" CssClass="Button" runat="server" Text="Total Organisation Report" /&gt;
     &lt;/td&gt;
     &lt;td&gt;
     &lt;/td&gt;
     &lt;td&gt;
     &lt;/td&gt;
     &lt;td&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="trCPUser"&gt;
     &lt;td&gt;
      &lt;asp:Button ID="btnCPUser" CssClass="Button" runat="server" Text="CP User" /&gt;
     &lt;/td&gt;

     &lt;td&gt;
      &lt;asp:Button ID="btnCPUserSubTotal" CssClass="Button" runat="server" Text="CP User Sub Total Report" /&gt;
     &lt;/td&gt;
     &lt;td&gt;
      &lt;asp:Button ID="btnContactPointUserHistory" CssClass="Button" runat="server" Text="ContactPoint User History Report" /&gt;
     &lt;/td&gt;
     &lt;td&gt;
     &lt;/td&gt;
     &lt;td&gt;
     &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr id="trTraining"&gt;
     &lt;td&gt;
      &lt;asp:Button ID="btnTrainingCourse" CssClass="Button" runat="server" Text="Training Course" /&gt;
     &lt;/td&gt;

     &lt;td&gt;
      &lt;asp:Button ID="btnTrainingCourseTrainer" CssClass="Button" runat="server" Text="Training Course Trainer" /&gt;
     &lt;/td&gt;

     &lt;td&gt;
      &lt;asp:Button ID="btnTrainingCourseDelegate" CssClass="Button" runat="server" Text="Training Course Delegate" /&gt;
     &lt;/td&gt;

     &lt;td&gt;
      &lt;asp:Button ID="btnTrainingVenue" CssClass="Button" runat="server" Text="Training Course Venue" /&gt;
     &lt;/td&gt;
     &lt;td&gt;
     &lt;/td&gt;

    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

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

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

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

<p>Please suggest using Jquery.</p>

<p>Thanks,</p>

<p>Best Regards,</p>

<p>Sol</p>
