JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table style="border: solid 2px #336699;" cellspacing="0" cellpadding="3" id="mytable" name="mytable" rules="all">
    <thead>
        <tr style="background-color: #336699; color: White;">
            <th>Product ID</th>
            <th>Product Name</th>
            <th>person</th>
         </tr>
    </thead>
    <tbody>
        <tr>
            <td> product1</td>
            <td> 1.5</td>
            <td> sue</td>
        </tr>
        <tr>
            <td> new product</td>
            <td> 12</td>
            <td> john</td>
        </tr>
        <tr>
            <td> old product</td>
            <td> 14</td>
            <td> smith</td>
        </tr>
        <tr>
            <td> testing product</td>
            <td> 99</td>
            <td> Brian</td>
        </tr>
        <tr>
            <td> something</td>
            <td> 85</td>
            <td> Tom</td>
        </tr>
    </tbody>
</table>

Search filter:
<input type="text" name="searchFilter" id="searchFilter" />

JavaScript

$('#searchFilter').keyup(function () {
    $('#mytable tbody tr').hide();
    $('#mytable tbody tr:contains(' + $('#searchFilter').val() + ')').show();    
});