Search an HTML Table

by Pankaj Sapkal

HTML

<table>
    <tr>
        <th>Unique ID</th>
        <th>Random ID</th>
        <th>Random ID</th>
    </tr>
    <tr>
        <td>214215</td>
        <td>442</td>
        <td>aaa</td>
    </tr>
    <tr>
        <td>1252512</td>
        <td>556</td>
        <td>ss</td>
    </tr>
    <tr>
        <td>2114</td>
        <td>556</td>
        <td>ggg</td>
    </tr>
    <tr>
        <td>3245466</td>
        <td>334</td>
        <td>ddd</td>
    </tr>
    <tr>
        <td>24111</td>
        <td>54364</td>
        <td>fff</td>
    </tr>
    <tr>
        <td>214215</td>
        <td>442</td>
        <td>dfgs</td>
    </tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

CSS

table, tr, td, th {
    border: 1px solid blue;
    padding: 2px;
}
table th {
    background-color: #999999;
}

JavaScript

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        $row = $(this);
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});