Jquery搜索表

时间:2017-04-26 00:45:50

标签: javascript jquery

您好我需要在表格中使用jquery进行搜索。但问题是我的代码只搜索所有行的第一个元素而不是搜索整个表并显示结果。我如何搜索整个表格?

这是我的jquery代码

$("#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();

            }
        }


    });
});

这是我的html表:

<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>

1 个答案:

答案 0 :(得分:3)

试试这个 -

 $("#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>

由于