How to Create a Filter/Search Table in HTML using Jquery with all columns and rows .

As we have seen in the last article we can search table data with particular columns but in this article, we learn how to search/filter table data using jquery in HTML. It’s very important to learn because this code is full base on the client side, meaning no server hit.

 


HTML CODE:

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>

        $(document).ready(function () {

            $("#myInput").on("keyup", function () {

                var value = $(this).val().toLowerCase();

                $("#myTable tr").filter(function () {

                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

                });

            });

        });

    </script>

    <style>

        #myInput {

            background-image: url('/css/searchicon.png');

            background-position: 10px 10px;

            background-repeat: no-repeat;

            width: 100%;

            font-size: 16px;

            padding: 12px 20px 12px 40px;

            border: 1px solid #ddd;

            margin-bottom: 12px;

        }

 

        table {

            font-family: 'Times New Roman', Times, serif;

            border-collapse: collapse;

            width: 100%;

        }

 

        td, th {

            border: 1px solid #ff0000;

            text-align: left;

            padding: 8px;

        }

 

        tr:nth-child(even) {

            background-color: #ffd800;

        }

    </style>

</head>

<body>

    <h2>Cricket Team List</h2>

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names , country" title="Type in a name">

 

    <table id="myTable">

        <tr class="header">

            <th style="width: 60%;">Name</th>

            <th style="width: 40%;">Country</th>

        </tr>

        <tr>

            <td>Rahul Dravid</td>

            <td>India</td>

        </tr>

        <tr>

            <td>Stephen Fleming</td>

            <td>New Zealand</td>

        </tr>

        <tr>

            <td>Arvind kumar</td>

            <td>India</td>

        </tr>

        <tr>

            <td>Chris Cairns</td>

            <td>New Zealand</td>

        </tr>

        <tr>

            <td>Adam Gilchrist</td>

            <td>Australia</td>

        </tr>

        <tr>

            <td>Shane Warne</td>

            <td>Australia</td>

        </tr>

        <tr>

            <td>Virender Sehwag</td>

            <td>India</td>

        </tr>

        <tr>

            <td>Makhaya Ntini</td>

            <td>South Africa</td>

        </tr>

        <tr>

            <td>Brian Lara</td>

            <td>West Indies</td>

        </tr>

        <tr>

            <td>Jacques Kallis</td>

            <td>South Africa</td>

        </tr>

    </table>

</body>

</html>


DEMO:-

 

Cricket Team List

Name Country
Rahul Dravid India
Stephen Fleming New Zealand
Arvind kumar India
Chris Cairns New Zealand
Adam Gilchrist Australia
Shane Warne Australia
Virender Sehwag India
Makhaya Ntini South Africa
Brian Lara West Indies
Jacques Kallis South Africa

 

How to Create a Filter/Search Table in HTML using Jquery with all columns and rows . How to Create a Filter/Search Table in HTML using Jquery with all columns and rows .   Reviewed by NEERAJ SRIVASTAVA on 12:42:00 PM Rating: 5

No comments:

Powered by Blogger.