title: jQuery show/hide table rows based on cell content
body: <p>I'm trying to make some Javascript that shows/hides rows in a data table based on the content of the 4th cell.</p>
  
  <p>Table is as follows:</p>
  
  <pre><code>DATE | DESCRIPTION | PRICE | PHONE |  STATUS  |
  -----------------------------------------------
  xxx  | yyyyyyyyyyy | 3243  | 32553 | Finished |
  xxx  | yyyyyyyyyyy | 3243  | 32553 | Suspeded |
  xxx  | yyyyyyyyyyy | 3243  | 32553 | Active   |
  xxx  | yyyyyyyyyyy | 3243  | 32553 | Finished |
  </code></pre>
  
  <p>And I have the following code on the onChange function of a dropdown:</p>
  
  <pre><code>function refinesearch() {
      $(".data tr").hide(); //hide all rows
      var refine = $("#refine1").val(); //retrieve wanted status
  
      if(refine=="All") {
          $(".data tr").show(); //show all rows if want to see All
      } else {
  
          $(".data tr").each(function() { //loop over each row
  
               if($("td:eq(4)").text() == refine) { //check value of TD
                   $(this).show(); //show the row 
  
               }
  
          });
  
      }
  }
  </code></pre>
  
  <p>Basically, the dropdown has the different statuses in, and if they selected, e.g Finished only the rows that have the status Finished should be shown and all others hidden.</p>
  
  <p>But it doesn't seem to be working correctly. When I select All it works and when I select Finished it shows them all for some reason! Selecting any other value makes all rows hidden! :S - any ideas?</p>