title: Table Filtering, Sorting, Distinct Records using jquery/javascript/css in html
body: <p>There will be 6 tabs in html page i.e A,B,C,D,E,F and 2 dropdowns.</p>
  
  <p>Working Behavior is : User will select one value from 2 dropdowns. Then based on value selected, the filtering needs to be applied on html table present in each table. 
  `</p>
  
  <pre><code>var options = $("#comboB").html();
  $("#comboA").change(function(e) {
      var text = $("#comboA :selected").text();
      alert(text);
      $("#comboB").html(options);
      $('#comboB :not([value^="' + text + '"])').remove();
  
  });
  $("#comboB").change(function(e) {
      var text = $("#comboB :selected").text();
      alert(text);
      var allRows = $("tr");
      allRows.hide();
      $("tr:contains('" + text + "')").show();
  
  });
  
  
  
  &lt;div class="dd"&gt;
  &lt;select id="comboA"&gt;
  &lt;option value=""&gt;Select Value&lt;/option&gt;
  &lt;option value="A"&gt;A&lt;/option&gt;
  &lt;option value="B"&gt;B&lt;/option&gt;
  &lt;option value="C"&gt;C&lt;/option&gt;
  &lt;option value="D"&gt;D&lt;/option&gt;
  &lt;option value="E"&gt;E&lt;/option&gt;
  &lt;option value="F"&gt;F&lt;/option&gt;    
  &lt;/select&gt;
  
  &lt;select id="comboB"&gt;
  &lt;option value=""&gt;Select Value&lt;/option&gt;
  &lt;option value="A"&gt;A 1&lt;/option&gt;
  &lt;option value="A"&gt;A 2&lt;/option&gt;
  &lt;option value="A"&gt;A 3&lt;/option&gt;
  &lt;option value="B"&gt;B 1&lt;/option&gt;
  &lt;option value="B"&gt;B 2&lt;/option&gt;
  &lt;option value="B"&gt;B 3&lt;/option&gt;
  &lt;option value="B"&gt;B 4&lt;/option&gt;
  &lt;option value="C"&gt;C 1&lt;/option&gt;
  &lt;option value="D"&gt;D 1&lt;/option&gt;
  &lt;option value="D"&gt;D 2&lt;/option&gt;
  &lt;option value="E"&gt;E 1&lt;/option&gt;
  &lt;option value="E"&gt;E 2&lt;/option&gt;
  &lt;option value="E"&gt;E 3&lt;/option&gt;
  &lt;option value="E"&gt;E 4&lt;/option&gt;
  &lt;option value="F"&gt;F 1&lt;/option&gt;
  &lt;option value="F"&gt;F 2&lt;/option&gt;
  &lt;option value="F"&gt;F 3&lt;/option&gt;
  &lt;option value="F"&gt;F 4&lt;/option&gt;
  &lt;option value="F"&gt;F 5&lt;/option&gt;
  &lt;option value="F"&gt;F 6&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="tbdata"&gt;
  &lt;table id="Fdata" border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;A&lt;/th&gt;
          &lt;th&gt;B&lt;/th&gt;
          &lt;th&gt;C&lt;/th&gt;
          &lt;th&gt;D&lt;/th&gt;
          &lt;th&gt;E&lt;/th&gt;
          &lt;th&gt;F&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 2&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 2&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 2&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 2&lt;/td&gt;
          &lt;td class="F"&gt;F 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 2&lt;/td&gt;
          &lt;td class="F"&gt;F 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 2&lt;/td&gt;
          &lt;td class="F"&gt;F 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 2&lt;/td&gt;
          &lt;td class="F"&gt;F 5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 2&lt;/td&gt;
          &lt;td class="F"&gt;F 6&lt;/td&gt;
      &lt;/tr&gt;   
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 3&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 3&lt;/td&gt;
          &lt;td class="F"&gt;F 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 3&lt;/td&gt;
          &lt;td class="F"&gt;F 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 3&lt;/td&gt;
          &lt;td class="F"&gt;F 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 3&lt;/td&gt;
          &lt;td class="F"&gt;F 5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 3&lt;/td&gt;
          &lt;td class="F"&gt;F 6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 4&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 4&lt;/td&gt;
          &lt;td class="F"&gt;F 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 4&lt;/td&gt;
          &lt;td class="F"&gt;F 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 4&lt;/td&gt;
          &lt;td class="F"&gt;F 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 2&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 4&lt;/td&gt;
          &lt;td class="F"&gt;F 5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 4&lt;/td&gt;
          &lt;td class="F"&gt;F 6&lt;/td&gt;
      &lt;/tr&gt;   
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 2&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 2&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 2&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 2&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="A"&gt;A 1&lt;/td&gt;
          &lt;td class="B"&gt;B 1&lt;/td&gt;
          &lt;td class="C"&gt;C 1&lt;/td&gt;
          &lt;td class="D"&gt;D 1&lt;/td&gt;
          &lt;td class="E"&gt;E 1&lt;/td&gt;
          &lt;td class="F"&gt;F 4&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/anjsfiddle/BZNpH/5/" rel="nofollow">Link to code that I have tried so far</a>.</p>
  
  <p>Now I am not sure how to do following things.</p>
  
  <p><strong>1)</strong> Assume User has selected any value from dropdown, then i am able to filter html table. If user has selected F then only F columns should be visible. Also only the distinct values should be displayed (There are duplicate values )</p>
  
  <p><strong>2)</strong> If i select the first value from 2nd dropdown, then change event is not called due to which filtering is not happening. How to resolve this?           </p>
  
  <p><strong>3)</strong> I have to create tabs for each Option(A,B,C..) and after selecting dropdown value, and if user goes to A tab, then A column should be displayed. If B tab is selected then B column should be displayed. It should display value based on value selected in dropdown.<br>
  I created one html page with navigation tabs, but not sure how to integrate that with this. </p>