JQuery filter() examples

embirath · October 29, 2019

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)
});
});
});

ishan_shah · March 5, 2020

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>

Sign In

JQuery filter() examples

Recommended Posts

embirath

Link to comment

Share on other sites

ishan_shah

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity