Top Gun
Top Gun

Reputation: 688

Jquery search withing the table

Hi I need to search using the jquery within a table. But the issue is the my code is searching only the first element of all rows instead of searching whole table and show result. How can i search the whole table?

Here is my jquery code

$("#search").on("keyup", function() {
    var value = $(this).val();

    $(".table tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

                var id = $row.find("td").text();

            if (id.indexOf(value) !== 0) {
                $row.hide();
                </td>');
            }
            else {
                $row.show();

            }
        }


    });
});

Here is my html Table:

<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
                        <thead>
                        <tr>
                            <th>No</th>
                            <th>Type</th>
                            <th>Name</th>
                            <th>Temp Address</th>
                            <th>Permanent Address</th>
                            <th>Mobile</th>
                            <th>Home</th>
                            <th>Update</th>
                        </tr>
                        </thead>
                        <tbody><tr>

                <td>27006</td>
                <td>Fixer</td>
                <td>Sam</td>
                <td>testing address</td>
                <td></td>
                <td>123456</td>
                <td>123456</td>
            </tr>
            </tbody>
            <tbody><tr>

                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            </tbody>
            </table>

Upvotes: 0

Views: 43

Answers (1)

Harsheet
Harsheet

Reputation: 628

Try this -

 $("#search").keyup(function(){
        _this = this;
        $.each($("#employees tbody tr"), function() {        
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
               $(this).hide();
            else
               $(this).show();                
        });
    }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
                     <thead>
                        <tr>
                            <th>No</th>
                            <th>Type</th>
                            <th>Name</th>
                            <th>Temp Address</th>
                            <th>Permanent Address</th>
                            <th>Mobile</th>
                            <th>Home</th>
                            <th>Update</th>
                        </tr>
                      </thead>
                      <tbody>
                      <tr>
                        <td>27006</td>
                        <td>Fixer</td>
                        <td>Sam</td>
                        <td>testing address</td>
                        <td></td>
                        <td>123456</td>
                        <td>123456</td>
                      </tr>
                </tbody>
            <tbody><tr>

                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            </tbody>
            </table>

Thanks

Upvotes: 3

Related Questions