Jump to content
Sign in to follow this  
embirath

JQuery filter() examples

Recommended Posts

I'm new to JQuery so bare with me if I'm saying something silly. In the JQuery tutorial on w3schools website, the examples illustrating the use of the .filter() function appears to be using the filter function as a "for loop" to step through table rows. The .filter() function isn't actually doing the filtering in the table. The filtering happens when the .toggle() function either hides or shows the row in the table. Why use a filter function instead of say the .each() function? Am I missing something? 

They're using a function inside the filter, like $('#myTable tr').filter(function(){...}). That function isn't returning anything (there is no "return" call inside). So the use of the filter function is solely to step through the rows? Just trying to understand it.

This section is under JQuery Misc / JQuery Filtering.

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Share this post


Link to post
Share on other sites

You can try following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>jQuery Demo</title>
    <script>
        $(document).ready(function () {
            $("#filter").on("keyup", function () {
                var Value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(Value) > -1);
                });
            });
        });
    </script>
    <style>
        table {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            border: 1px solid black;
            padding: 5px;
        }

        td,
        th {
            border: 1px solid black;
            text-align: center;
            padding: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h2>Filtering Table</h2>
    <input type="text" placeholder="Search.." id="filter"><br><br>
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody id="myTable">
            <tr>
                <td>Ishan</td>
                <td>Shah</td>
                <td>Ahmedabad</td>
            </tr>
            <tr>
                <td>Parth</td>
                <td>Madiya</td>
                <td>Rajkot</td>
            </tr>
            <tr>
                <td>Dhiren</td>
                <td>Jakhariya</td>
                <td>Jamnagar</td>
            </tr>
            <tr>
                <td>Chirag</td>
                <td>Radadiya</td>
                <td>Jamnagar</td>
            </tr>
            <tr>
                <td>Kishan</td>
                <td>Lal</td>
                <td>Khambhaliya</td>
            </tr>
        </tbody>
    </table><br>
</body>

</html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...