JSFiddle - React, Tailwind, and code Playground

by wind_chime18

HTML

<input id="emp_search" />
    <input id="search" type="button" value="search" />
    <table>
       <tr>
           <th>First Name</th>
           <th>Last Name</th>
           <th>number</th>
           <th>letters</th>
       </tr>
       <tr>
           <td>John</td>
           <td>Lennon</td>
           <td>151</td>
           <td>sf</td>
       </tr>
       <tr>
           <td>Paul</td>
           <td>McCartney</td>
           <td>753</td>
           <td>tj</td>
       </tr>
       <tr>
           <td>George</td>
           <td>Harrison</td>
           <td>24</td>
           <td>ge</td>
       </tr>
       <tr>
           <td>Ringo</td>
           <td>Starr</td>
           <td>26</td>
           <td>hg</td>
       </tr>
    </table>

JavaScript

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

jQuery(function ($) {
    ///search this table
    $(' #search ').click(function () {
        var searchthis = new RegExp($(' #emp_search ').val().replace(/\s+/, '|'), 'i');
        $("table").find("tr").slice(1).each(function (index) {
          //  var text = $(this).find("td").text().toLowerCase().trim();
            var text = $.trim($(this).text());
            $(this).toggle(searchthis.test(text));
        });
    });
});