pawiromitchel
1/27/2017 - 11:27 AM

JS - search within a table

JS - search within a table

<strong>Search Here</strong>
<input type="text" id="search" class="form-control" placeholder="Search" data-original-title="" title="">
<br>
<table class="table table-bordered">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>Data 1_1</td>
          <td>Data 1_2</td>
      </tr>
      <tr>
          <td>Data 2_1</td>
          <td>Data 2_2</td>
      </tr>
    </tbody>
</table>
$(document).ready(function(){
    $("#search").keyup(function () {
        var value = this.value.toLowerCase().trim();

        $("table tr").each(function (index) {
            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;
            });
        });
    });
});