title: Edit table with a select box
body: <p>How can I only show the channel in the table that I pick from the select box?</p>
  
  <pre><code>&lt;select&gt;
      &lt;option style="display:none;"&gt;Channel&lt;/option&gt;
      &lt;option value="all"&gt;All&lt;/option&gt;
      &lt;option value="onlineButcher"&gt;Online Butcher&lt;/option&gt;
      &lt;option value="theMeatSite"&gt;The Meat Site&lt;/option&gt;
      &lt;option value="bbqOnline"&gt;BBQ Online&lt;/option&gt;
      &lt;option value="weSellMeat"&gt;We Sell Meat&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>These are my options so in the table below say I only wanted it to show rows with the channel Online Butcher?</p>
  
  <pre><code>&lt;table class="orders"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Niche ID&lt;/th&gt;
              &lt;th&gt;Channel&lt;/th&gt;
              &lt;th&gt;Customer Name&lt;/th&gt;
              &lt;th&gt;Dispatch&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;012345678&lt;/td&gt;
          &lt;td&gt;Online Butcher&lt;/td&gt;
          &lt;td&gt;Mr D Jones&lt;/td&gt;
          &lt;td&gt;Dispatch&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;012345677&lt;/td&gt;
          &lt;td&gt;The Meat Site&lt;/td&gt;
          &lt;td&gt;Mr C Jones&lt;/td&gt;
          &lt;td&gt;Dispatch&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;012345676&lt;/td&gt;
          &lt;td&gt;BBQ Online&lt;/td&gt;
          &lt;td&gt;Mr B Jones&lt;/td&gt;
          &lt;td&gt;Dispatch&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;012345675&lt;/td&gt;
          &lt;td&gt;We Sell Meat&lt;/td&gt;
          &lt;td&gt;Mr A Jones&lt;/td&gt;
          &lt;td&gt;Dispatch&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Hope it makes sense.</p>
  
  <p>I used this to sort my table using the headers, maybe something similar but instead of order only show certain channel.</p>
  
  <pre><code>function sortTable(table, col, reverse) {
      var tb = table.tBodies[0], // use `&lt;tbody&gt;` to ignore `&lt;thead&gt;` and `&lt;tfoot&gt;` rows
          tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
          i;
      reverse = -((+reverse) || -1);
      tr = tr.sort(function (a, b) { // sort rows
          return reverse // `-1 *` if want opposite order
              * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                  .localeCompare(b.cells[col].textContent.trim())
                 );
      });
      for(i = 0; i &lt; tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
  }
  
  function makeSortable(table) {
      var th = table.tHead, i;
      th &amp;&amp; (th = th.rows[0]) &amp;&amp; (th = th.cells);
      if (th) i = th.length;
      else return; // if no `&lt;thead&gt;` then do nothing
      while (--i &gt;= 0) (function (i) {
          var dir = 1;
          th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
      }(i));
  }
  
  function makeAllSortable(parent) {
      parent = parent || document.body;
      var t = parent.getElementsByTagName('table'), i = t.length;
      while (--i &gt;= 0) makeSortable(t[i]);
  }
  
  window.onload = function () {makeAllSortable();};
  </code></pre>