<section class="container">

  <h2>Light Javascript Table Filter</h2>

  <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">

  <table class="order-table table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@gmail.com</td>
        <td>0123456789</td>
        <td>99</td>
      </tr>
      <tr>
        <td>Jane Vanda</td>
        <td>jane@vanda.org</td>
        <td>9876543210</td>
        <td>349</td>
      </tr>
      <tr>
        <td>Alferd Penyworth</td>
        <td>alfred@batman.com</td>
        <td>6754328901</td>
        <td>199</td>
      </tr>
    </tbody>
  </table>

</section>
(function(document) {
  'use strict';

  var LightTableFilter = (function(Arr) {

    var _input;

    function _onInputEvent(e) {
      _input = e.target;
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
          Arr.forEach.call(tbody.rows, _filter);
        });
      });
    }

    function _filter(row) {
      var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }

    return {
      init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
          input.oninput = _onInputEvent;
        });
      }
    };
  })(Array.prototype);

  document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
      LightTableFilter.init();
    }
  });

})(document);

External CSS

  1. https://s.cdpn.io/3/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.