title: filter html table based on a value by clicking a button using javascript
body: <p>The code below creates a table from mysql on a web page. I want to be able to add 3 buttons and be able to filter the table information by male, female and show all using javascript/jquery. I have tried a few suggestions on stackoverflow but they don't seem to fit my requirement.</p>
  
  <p>Please can someone help me with this on implementing a solution? :)</p>
  
  <p></p>
  
  <pre><code>&lt;thread&gt;
      &lt;tr&gt;
          &lt;th&gt;Primary Key&lt;/th&gt;
          &lt;th&gt;Full Name&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
          &lt;th&gt;Facebook Profile&lt;/th&gt;
      &lt;tr&gt;
  &lt;/thread&gt;
  
  &lt;button type="button" class="btn btn-default btn-lg" id="male"&gt;Male&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button type="button" class="btn btn-default btn-lg" id="female"&gt;Female&lt;/button&gt;
  </code></pre>
  
  <p>
  
  
  <pre><code>echo "&lt;br /&gt;&lt;br /&gt;There are " . $num_rows . " participants.";
  
  echo "&lt;br /&gt;There are " . $num_rows1 . " male participants.";
  
  echo "&lt;br /&gt;There are " . $num_rows2 . " female participants.";
  
  echo "&lt;br /&gt;&lt;br /&gt;";
  
  
  while($tablev2=mysql_fetch_assoc($records)) {
     if($tablev2['gender']=='male') {
  $var_tr = 'success';
  }
  elseif($tablev2['gender']=='female') {
      $var_tr = 'danger';
  }
  
      echo "&lt;tr class='$var_tr'&gt;";
  
      echo "&lt;td&gt;".$tablev2['primary_key']."&lt;/td&gt;";
  
      echo "&lt;td&gt;".$tablev2['name']."&lt;/td&gt;";
  
      echo "&lt;td&gt;".$tablev2['gender']."&lt;/td&gt;";
  
      echo "&lt;td&gt;&lt;a target = '_blank' href='".$tablev2['link']."'&gt;Click to see their facebook profile&lt;/a&gt;&lt;/td&gt;";
  
      echo "&lt;/tr&gt;";
  </code></pre>
  
  <p>}</p>
  
  <p>javascript:</p>
  
  <p>$(document).ready(function() {</p>
  
  <pre><code>$("#male").click(function(){
      $('tr.female').toggle();
  });
  
  
  $('#female').click(function(){
      $('tr.male').toggle();
  }); 
  </code></pre>
  
  <p>});</p>