title: How do you filter table via JavaScript with a bootstrap dropdown?
body: <p>I think my question is a little bit more complicated than what I saw on the internet because I need to make multiple filtrations on a single table. So here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function searchTable() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i &lt; tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 20px;
  }
  
  #table th,
  #table td {
    text-align: left;
    padding: 12px;
  }
  
  #table tr {
    border-bottom: 1px solid #ddd;
  }
  
  #table tr.header,
  #table tr:hover {
    background-color: #f1f1f1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;div class="input-group"&gt;
    &lt;input class="form-control" id="search" onkeyup="searchTable();" placeholder="search distribution" name="s" autocomplete="off" autofocus&gt;
    &lt;div class="input-group-btn"&gt;
      &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Devices&lt;/button&gt;
      &lt;div class="dropdown-menu dropdown-menu-right"&gt;
        &lt;a class="dropdown-item" href="javascript:void(0)" onclick=""&gt;Desktop&lt;/a&gt;
        &lt;a class="dropdown-item" href="javascript:void(0)"&gt;Mobile&lt;/a&gt;
        &lt;a class="dropdown-item" href="javascript:void(0)"&gt;Tablet&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;table id="table" class="table-striped table-hover"&gt;
    &lt;tr class="header"&gt;
      &lt;th style="width:35%;"&gt;Distribution&lt;/th&gt;
      &lt;th style="width:35%;"&gt;Supported devices&lt;/th&gt;
      &lt;th style="width:20%;"&gt;Download&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Glass '17&lt;/td&gt;
      &lt;td&gt;Desktop &amp; Mobile&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Glass '17&lt;/td&gt;
      &lt;td&gt;Tablet&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Other distribution&lt;/td&gt;
      &lt;td&gt;Mobile&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Distribution 3&lt;/td&gt;
      &lt;td&gt;Tablet &amp; Mobile&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The <code>seachTable()</code> function is for filtering the table by the content of <code>&lt;td&gt;</code> (first child). What I am trying to achieve is also filtering the table by device type. The hard part is that some distributions are supported on more than 1 device type.
  <hr></p>
  
  <h2>What I tried?</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function searchTable() {
    var input, filter, table, tr, td, i;
  
    var input = document.getElementById("search");
    var filter = input.value.toUpperCase();
    var table = document.getElementById("table");
    var tr = table.getElementsByTagName("tr");
  
    for (var i = 1; i &lt; tr.length; i++) {
      var tds = tr[i].getElementsByTagName("td");
      var firstCol = tds[0].textContent.toUpperCase();
      var secondCol = tds[1].textContent.toUpperCase();
      if (firstCol.indexOf(filter) &gt; -1 || secondCol.indexOf(filter) &gt; -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
  
  function searchTableDevice(device) {
    var filter, table, tr, td, i;
  
    $("#deviceSelector").html(device);
  
    var filter = device.toUpperCase();
    var table = document.getElementById("table");
    var tr = table.getElementsByTagName("tr");
    if (device == "all") {
      $("#table tr").css("display", "");
      $("#deviceSelector").html("Devices");
    } else {
      searchTable();
      for (var i = 1; i &lt; tr.length; i++) {
        var tds = tr[i].getElementsByTagName("td");
        var secondCol = tds[1].textContent.toUpperCase();
        if (secondCol.indexOf(filter) &gt; -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 20px;
  }
  
  #table th,
  #table td {
    text-align: left;
    padding: 12px;
  }
  
  #table tr {
    border-bottom: 1px solid #ddd;
  }
  
  #table tr.header,
  #table tr:hover {
    background-color: #f1f1f1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;div class="input-group"&gt;
    &lt;input class="form-control" id="search" onkeyup="searchTable();" placeholder="search distribution" name="s" autocomplete="off" autofocus&gt;
    &lt;div class="input-group-btn"&gt;
      &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="deviceSelector"&gt;
          Devices
        &lt;/button&gt;
      &lt;div class="dropdown-menu dropdown-menu-right"&gt;
        &lt;a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)"&gt;Desktop&lt;/a&gt;
        &lt;a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)"&gt;Mobile&lt;/a&gt;
        &lt;a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice(this.innerHTML)"&gt;Tablet&lt;/a&gt;
        &lt;div role="separator" class="dropdown-divider"&gt;&lt;/div&gt;
        &lt;a class="dropdown-item" href="javascript:void(0)" onclick="searchTableDevice('all')"&gt;All&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;table id="table" class="table-striped table-hover"&gt;
    &lt;tr class="header"&gt;
      &lt;th style="width:35%;"&gt;Distribution&lt;/th&gt;
      &lt;th style="width:35%;"&gt;Supported devices&lt;/th&gt;
      &lt;th style="width:20%;"&gt;Download&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Glass '17&lt;/td&gt;
      &lt;td&gt;Desktop &amp; Mobile&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Glass '17&lt;/td&gt;
      &lt;td&gt;Tablet&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Other distribution&lt;/td&gt;
      &lt;td&gt;Mobile&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Distribution 3&lt;/td&gt;
      &lt;td&gt;Tablet &amp; Mobile&lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="btn btn-primary" target="_blank"&gt;Download&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried making a new function <code>searchTableDevice()</code> with similar content as <code>searchTable()</code>, but instead of getting the text from an input it is getting the text from the <code>&lt;a&gt;</code> elements in the drop-down. What happened? <code>searchTable()</code> is setting <code>style.display = "block"</code> to the rows that match the text from the input and the hidden by <code>seacrhTableDevice()</code> rows were also displayed. I totally got confused about what to do.
  <hr>
  Any help would be highly appreciated and welcomed. Thanks in advance!</p>