JSFiddle - React, Tailwind, and code Playground

by David Simpson

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Filter a HTML Table Using JavaScript</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../res/demo.css"/>
    <style type="text/css">
        h3 span {
            font-size: 26px;
        }
        h3 input.search-input {
            width: 300px;
            margin-left: auto;
            float: right;
            margin-top: -3px;
        }
        .mt32 {
            margin-top: 32px;
        }
        table, input.search-input {
            font-family: "Lato", sans-serif;
        }
    </style>
</head>
<body>
    
    <div class="container mt32">
        <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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f0e212e613b3d3a25262323200f28222e2623612c2022">[email&#160;protected]</a></td>
                    <td>050214</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Antonio Moreno</td>
                    <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8beae5ffe4e5e2e4e6e4f9eee5e4b9cbece6eae2e7a5e8e4e6">[email&#160;protected]</a></td>
                    <td>12209</td>
                   ...

JavaScript

(function(document) {
   'use strict';

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

     function _onInputSearch(e) {
       search_input = e.target;
       var tbody = document.querySelector('table 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 input = document.querySelector('.search-input');
         input.oninput = _onInputSearch;
       }
     };
   })(Array.prototype);

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

 })(document);