title: Filter HTML table after selecting values for one column
body: <p>I am trying to filter an HTML table row after selecting a value for the first column. It works but it also searches for the values in the second column:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.platform_filter').keyup(function(){
   var val=$(this).val();    
          $('table tbody tr').hide();
           var trs=$('table tbody tr').filter(function(d){
           return $(this).text().toLowerCase().indexOf(val)!=-1;
           });
           console.log(trs);
           trs.show();   
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Roboto');
  
  body { 
      margin: 0;
      color:#fff;
      font-family: Roboto; }
  .row {
      display: table;
      width: 100%;
      height: 241px; 
      background-color:#454545;
  }
  .row &gt; .col-lg-6 {
      display: table-cell;
      vertical-align: middle;
  }
  .container {
    /*display: flex;*/
    flex-wrap: wrap;
  }
  .container &gt; div {
    padding: 15px;
    margin: 5px;
    flex: 0 0 calc(100% - 20px);
    text-align: left;
  }
  
  /*img {
      padding-left: 7%;
      max-height:55px;
      width:auto;
  }*/
  td{
    padding: 2px 2px;
    text-align: center;
    margin: 6px 0;
    border: none;
  }
  table{
    width: 100%;
    background-color:#454545;
    font-weight:500;
    border-collapse: separate;
    border-spacing:0.3em 1.1em;
    color: #fff;
    border: 0;
  }
  tr{
      font-size: 1.5em;
      text-transform:capitalize;
  }
  th {
      color: #CCC;
      font-size: 0.8em;
    }
   
  #one,#two,#three,#four{
      padding-top:2%;
    }
  #platform {
      background-image: url('/css/searchicon.png'); /* Add a search icon to input */
      background-position: 10px 12px; /* Position the search icon */
      background-repeat: no-repeat; /* Do not repeat the icon image */
      padding: 2px 2px;
      text-align: center;
      margin: 6px 0;
      border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;table&gt;
      &lt;thead&gt;
         &lt;tr&gt;&lt;input type="text" class="platform_filter"/&gt;&lt;th&gt;Num Heading&lt;/th&gt;&lt;/tr&gt;
          &lt;/thead&gt;
      &lt;tbody&gt;
         &lt;tr&gt;&lt;td&gt;ABC&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
         &lt;tr&gt;&lt;td&gt;DEF&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
         &lt;tr&gt;&lt;td&gt;ABC&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
         &lt;tr&gt;&lt;td&gt;apolo&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I achieve that, I want to replace the input with a dropdown. I tried something below with no success:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.filter').change(function () {
      var values = [];
  
       $('.filter').each(function () {
          var colIdx = $(this).data('col');
  
           $(this).find('option:selected').each(function () {
               if ($(this).val() != "") values.push( {
                  text: $(this).text(),
                  colId : colIdx
               });
          });
      });
      
      filter('table &gt; tbody &gt; tr &gt; td', values);
  });
  
  function filter(selector, values) { 
      $(selector).each(function () {
          var sel = $(this);
          var tokens = sel.text().trim().split('\n');
          var toknesObj = [], i;
          for(i=0;i&lt;tokens.length;i++){
              toknesObj[i] = {
                 text:tokens[i].trim(), 
                 found:false
              };
          }
  
          var show = false;
          $.each(values, function (i, val) {                
  
         if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) &gt;= 0) {
       
             toknesObj[val].found = true;
            }
  
          });          
          console.log(tokens);
          var count = 0;
           $.each(toknesObj, function (i, val) {
               if (val.found){
                   count+=1;
               }
           });
          show = (count === values.length);        
          show ? sel.show() : sel.hide();
      });
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Roboto');
  
  body { 
      margin: 0;
      color:#fff;
      font-family: Roboto; }
  .row {
      display: table;
      width: 100%;
      height: 241px; 
      background-color:#454545;
  }
  .row &gt; .col-lg-6 {
      display: table-cell;
      vertical-align: middle;
  }
  .container {
    /*display: flex;*/
    flex-wrap: wrap;
  }
  .container &gt; div {
    padding: 15px;
    margin: 5px;
    flex: 0 0 calc(100% - 20px);
    text-align: left;
  }
  
  /*img {
      padding-left: 7%;
      max-height:55px;
      width:auto;
  }*/
  td{
    padding: 2px 2px;
    text-align: center;
    margin: 6px 0;
    border: none;
  }
  table{
    width: 100%;
    background-color:#454545;
    font-weight:500;
    border-collapse: separate;
    border-spacing:0.3em 1.1em;
    color: #fff;
    border: 0;
  }
  tr{
      font-size: 1.5em;
      text-transform:capitalize;
  }
  th {
      color: #CCC;
      font-size: 0.8em;
    }
   
  #one,#two,#three,#four{
      padding-top:2%;
    }
  #platform {
      background-image: url('/css/searchicon.png'); /* Add a search icon to input */
      background-position: 10px 12px; /* Position the search icon */
      background-repeat: no-repeat; /* Do not repeat the icon image */
      padding: 2px 2px;
      text-align: center;
      margin: 6px 0;
      border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-1.10.1.js"&gt;&lt;/script&gt;
  
  &lt;div id="one"&gt;&lt;div class="row"&gt;&lt;div class="col-lg-6" style="background-color: #e90649; width: 117px;"&gt;&amp;nbsp;&lt;/div&gt;&lt;div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;"&gt;Objc1&lt;br&gt;&lt;br&gt;&lt;/div&gt;&lt;div class="col-lg-6"&gt;&lt;div class="container"&gt;&lt;select class="filter" data-col="0"&gt;&lt;option value=""&gt;None&lt;/option&gt;&lt;option value="a"&gt;plat1&lt;/option&gt;&lt;option value="b"&gt;plat2&lt;/option&gt;&lt;/select&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Platform&lt;/th&gt;&lt;th&gt;Channel&lt;/th&gt;&lt;th&gt;Objective&lt;/th&gt;&lt;th&gt;Num1&lt;/th&gt;&lt;th&gt;Num2&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;plat1&lt;/td&gt;&lt;td&gt;chan1&lt;/td&gt;&lt;td&gt;Objc1&lt;/td&gt;&lt;td&gt;40&lt;/td&gt;&lt;td&gt;34&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;plat2&lt;/td&gt;&lt;td&gt;chan1&lt;/td&gt;&lt;td&gt;Objc1&lt;/td&gt;&lt;td&gt;26&lt;/td&gt;&lt;td&gt;22&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The script worked fine (filter applied but only for the first column --> I want the entire row to show after fitering for the values in the first column). The initial script that worked was:</p>
  
  <pre><code>   if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) &gt;= 0) {
  
         toknesObj[val.colId].found = true;
        }
  </code></pre>
  
  <p>and I changed it to :</p>
  
  <pre><code>   if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) &gt;= 0) {
  
         toknesObj[val].found = true;
        }
  </code></pre>