<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>
((document) => {
    "use strict";

    const LightTableFilter = (({ forEach }) => {
        let _input;

        function _onInputEvent({ target }) {
            _input = target;
            const tables = document.getElementsByClassName(
                _input.getAttribute("data-table")
            );
            forEach.call(tables, ({ tBodies }) => {
                forEach.call(tBodies, ({ rows }) => {
                    forEach.call(rows, _filter);
                });
            });
        }

        function _filter({ textContent, style }) {
            const text = textContent.toLowerCase();
            const val = _input.value.toLowerCase();
            style.display = !text.includes(val) ? "none" : "table-row";
        }

        return {
            init() {
                const inputs = document.getElementsByClassName(
                    "light-table-filter"
                );
                forEach.call(inputs, (input) => {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener("readystatechange", () => {
        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.