title: Jquery show/hide table rows
body: <p>I want to be able to show/hide the rows in a table using jquery. Ideally I want to have buttons above the table to sort the table with.</p>
  
  <p>i.e [Show rows with id:black] [Show rows with id:white] [Show all rows]</p>
  
  <p>I have searched all over but cannot find a solution. Anyone know how i can do this with jquery and make it cross browser compatible?</p>
  
  <p>Thanks (Code below)</p>
  
  <pre><code>&lt;table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla bla bla"&gt;
  &lt;caption&gt;bla bla bla&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr id="black"&gt;
      &lt;th&gt;Header Text&lt;/th&gt;
      &lt;th&gt;Header Text&lt;/th&gt;
      &lt;th&gt;Header Text&lt;/th&gt;
      &lt;th&gt;Header Text&lt;/th&gt;
      &lt;th&gt;Header Text&lt;/th&gt;
      &lt;th&gt;Header Text&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr id="white"&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
  &lt;/tr&gt;
    &lt;tr id="black"&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
      &lt;td&gt;Some Text&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>