How to Filter an HTML Table Using JavaScript (Search on the HTML Table)

Here is a solution to quickly filter an HTML table using JavaScript. Sometimes you have to show a large number of HTML table records and you have to quickly search the record by type in the search box. Today we share pure JavaScript code to filter table records easily.

JavaScript is a very powerful scripting language to execute on client-side. Through the JavaScript, we can find and filter record. Today session you will learn to create filter option for the HTML table using JavaScript. You can search by any of the columns just only single search box. Moreover, this JavaScript written code is effectively fewer lines and it will not affect any other functionality.

Quickly Search/Filter a HTML Table Using JavaScript

Here are one HTML Table element and one input text field for searching. Also, we used Bootstrap 4 to create a page layout. In the table element, we added some sample data. You can search by customer id, name, email, postal code, and country.

HTML table simply made with <tr>, <td> based. In this table, we added one class customers-list that will mapping with a search field. You can see we added attribute data-table="customers-list" to filter on customers-list class table. Now let’s move on JavaScript, here we create one variable called "search_input". Next step to initialize the JavaScript function, when page load completed (in our code readystatechange event). When any text typed in the search field, JavaScript will detect and find into table row using forEach loop. Thus we can archive this table filter functionality with lightweight code.

Here, we created one HTML file. Which is hold HTML, CSS, and JavaScript code. However, you can create separate files.

<!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>hardythomas.[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>

Following are demo and source code to filter an HTML table using JavaScript.

View DemoDownload Source

We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new WordPress articles for free. Moreover, you can explore here other interesting articles.


Join the Discussion.