title: Jquery Filtering Table results on data attribute
body: <p>I have a simple table that shows date in columns. Each <code>&lt;td&gt;</code> has a data attribute <code>data-port</code> I'd like to filter the results shown in the table, based on an option selected from a drop downlist.</p>
  
  <p>The HTML is :</p>
  
  <pre><code>&lt;select id='filter'&gt;
  &lt;option&gt;&lt;/option&gt;
  &lt;option value='fd18'&gt;OPTION A&lt;/option&gt;
  &lt;option value='af13'&gt;OPTION B&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;table id='table1'&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
      &lt;td data-port="fd18"&gt;&lt;div id="123" class="title"&gt;123&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="af13"&gt;&lt;div id="456" class="title"&gt;456&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="0000"&gt;&lt;div id="789" class="title"&gt;789&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="fd18"&gt;&lt;div id="213" class="title"&gt;213&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td data-port="fd18"&gt;&lt;div id="345" class="title"&gt;345&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="af13"&gt;&lt;div id="946" class="title"&gt;946&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="0000"&gt;&lt;div id="368" class="title"&gt;368&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="af13"&gt;&lt;div id="246" class="title"&gt;246&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;td data-port="af13"&gt;&lt;div id="642" class="title"&gt;642&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="fd18"&gt;&lt;div id="759" class="title"&gt;795&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="fd18"&gt;&lt;div id="335" class="title"&gt;335&lt;/div&gt;&lt;/td&gt;
      &lt;td data-port="fd18"&gt;&lt;div id="556" class="title"&gt;556&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Using jquery I'm trying to show the td's where the data-port equals the selected option and hide the rest. How can I do this and it is it possible to dynamically update the table layout so I still end up with neat columns.</p>
  
  <p>The jquery I'm using is :</p>
  
  <pre><code>$('#filter').change(function() {
      var port = $(this).val()
      console.log( port )
      $("td &gt; [data-port!=" + port+ "]").hide();
      $("td &gt; [data-port=" + port+ "]").show();
  });
  </code></pre>
  
  <p>The console shows the correct value being returned, but I end up hiding all TD's on the page not just the ones which don't match</p>
  
  <p>Any ideas how I can do this.
  Thanks</p>