image left rext right CodePen

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>JavaScript Table Filter Search</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        h3 span {
            font-size: 22px;
        }
        h3 input.search-input {
            width: 300px;
            margin-left: auto;
            float: right
        }
        .mt32 {
            margin-top: 32px;
        }
    </style>
</head>
<body class="mt32">
    <div class="container">
        <h3>
            <span>JavaScript Filter Table Data</span>
            <input type="search" placeholder="Search..." class="form-control search-input" data-table="customers-list"/>
        </h3>
        <table class="table table-striped mt32 customers-list">
            <thead>
                <tr>
                    <th>Customer ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Postal Code</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Ana Trujillo</td>
                    <td>[email protected]</td>
                    <td>050214</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Antonio Moreno</td>
                    <td>[email protected]</td>
                    <td>12209</td>
                    <td>Mexico</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Maria Anders</td>
                    <td>[email protected]</td>
                    <td>05021</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Thomas Hardy</td>
                    <td>[email protected]</td>
                    <td>WA1 1DP</td>
                    <td>United Kingdom</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Christina Berglund</td>
                    <td>[email protected]</td>
                    <td>S-958 22</td>
                    <td>Sweden</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Davolio Nancy</td>
                    <td>[email protected]</td>
                    <td>810025</td>
                    <td>India</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Fuller Andrew</td>
                    <td>[email protected]</td>
                    <td>W23 458</td>
                    <td>United State</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Leverling Janet</td>
                    <td>[email protected]</td>
                    <td>T5A 0B5</td>
                    <td>Canada</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        (function(document) {
            'use strict';

            var TableFilter = (function(myArray) {
                var search_input;

                function _onInputSearch(e) {
                    search_input = e.target;
                    var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
                    myArray.forEach.call(tables, function(table) {
                        myArray.forEach.call(table.tBodies, function(tbody) {
                            myArray.forEach.call(tbody.rows, function(row) {
                                var text_content = row.textContent.toLowerCase();
                                var search_val = search_input.value.toLowerCase();
                                row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
                            });
                        });
                    });
                }

                return {
                    init: function() {
                        var inputs = document.getElementsByClassName('search-input');
                        myArray.forEach.call(inputs, function(input) {
                            input.oninput = _onInputSearch;
                        });
                    }
                };
            })(Array.prototype);

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

        })(document);
    </script>
</body>
</html>

View another examples Add Own solution

3.67

Key_asdfg 130 points

                                    &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en-US&quot;&gt;
&lt;head&gt;
    &lt;title&gt;JavaScript Table Filter Search&lt;/title&gt;
    &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        h3 span {
            font-size: 22px;dsf
        }
        h3 input.search-input {
            width: 300px;
            margin-left: auto;
            float: right
        }
        .mt32 {
            margin-top: 32px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;mt32&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h3&gt;
            &lt;span&gt;JavaScript Filter Table Data&lt;/span&gt;
            &lt;input type=&quot;search&quot; placeholder=&quot;Search...&quot; class=&quot;form-control search-input&quot; data-table=&quot;customers-list&quot;/&gt;
        &lt;/h3&gt;
        &lt;table class=&quot;table table-striped mt32 customers-list&quot;&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;Customer ID&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Email&lt;/th&gt;
                    &lt;th&gt;Postal Code&lt;/th&gt;
                    &lt;th&gt;Country&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;Ana Trujillo&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;050214&lt;/td&gt;
                    &lt;td&gt;Germany&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;Antonio Moreno&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;12209&lt;/td&gt;
                    &lt;td&gt;Mexico&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;3&lt;/td&gt;
                    &lt;td&gt;Maria Anders&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;05021&lt;/td&gt;
                    &lt;td&gt;Germany&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;4&lt;/td&gt;
                    &lt;td&gt;Thomas Hardy&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;WA1 1DP&lt;/td&gt;
                    &lt;td&gt;United Kingdom&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;5&lt;/td&gt;
                    &lt;td&gt;Christina Berglund&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;S-958 22&lt;/td&gt;
                    &lt;td&gt;Sweden&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;6&lt;/td&gt;
                    &lt;td&gt;Davolio Nancy&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;810025&lt;/td&gt;
                    &lt;td&gt;India&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;7&lt;/td&gt;
                    &lt;td&gt;Fuller Andrew&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;W23 458&lt;/td&gt;
                    &lt;td&gt;United State&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;8&lt;/td&gt;
                    &lt;td&gt;Leverling Janet&lt;/td&gt;
                    &lt;td&gt;[email protected]&lt;/td&gt;
                    &lt;td&gt;T5A 0B5&lt;/td&gt;
                    &lt;td&gt;Canada&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;script&gt;
        (function(document) {
            'use strict';

            var TableFilter = (function(myArray) {
                var search_input;

                function _onInputSearch(e) {
                    search_input = e.target;
                    var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
                    myArray.forEach.call(tables, function(table) {
                        myArray.forEach.call(table.tBodies, function(tbody) {
                            myArray.forEach.call(tbody.rows, function(row) {
                                var text_content = row.textContent.toLowerCase();
                                var search_val = search_input.value.toLowerCase();
                                row.style.display = text_content.indexOf(search_val) &gt; -1 ? '' : 'none';
                            });
                        });
                    });
                }

                return {
                    init: function() {
                        var inputs = document.getElementsByClassName('search-input');
                        myArray.forEach.call(inputs, function(input) {
                            input.oninput = _onInputSearch;
                        });
                    }
                };
            })(Array.prototype);

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

        })(document);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;