Search and Filter items of table using pure JavaScript.

#javascript #webdev #beginners #programming

Here is the code for search and filter items from table
Simply HTML code to generate Table.


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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Search and Filter Using JavaScript!</title>
</head>

<body>
    <div class="main w-50 my-4 py-4 m-auto">
        <input type="search" class="form-control" placeholder="Type Here To Search" id="inp" onkeyup="searchFunction()">
        <table id="table" class="my-4 py-4 table table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">S.no</th>
                    <th scope="col">Name</th>
                    <th scope="col">Profession</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Sudip</td>
                    <td>FullStack Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Ram</td>
                    <td>Frontend Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Ramesh</td>
                    <td>Backend Web Deveoper</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Shyam</td>
                    <td>App Developer</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Hari</td>
                    <td>Graphics Designer</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>Arjun</td>
                    <td>Video Editor</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>

</html>

This code generate simple search bar and table than we'll add JavaScript code to make this working
**

JS Code

function searchFunction() {
      // Declare variables
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("inp");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }

JS code gives logic to do task

Final File index.html:


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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Search and Filter Using JavaScript!</title>
</head>

<body>
    <div class="main w-50 my-4 py-4 m-auto">
        <input type="search" class="form-control" placeholder="Type Here To Search" id="inp" onkeyup="searchFunction()">
        <table id="table" class="my-4 py-4 table table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">S.no</th>
                    <th scope="col">Name</th>
                    <th scope="col">Profession</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Sudip</td>
                    <td>FullStack Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Ram</td>
                    <td>Frontend Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Ramesh</td>
                    <td>Backend Web Deveoper</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Shyam</td>
                    <td>App Developer</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Hari</td>
                    <td>Graphics Designer</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>Arjun</td>
                    <td>Video Editor</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>
<script>
    function searchFunction() {
      // Declare variables
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("inp");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
    </script>

</html>

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

DEV Community

Search and Filter items of table using pure JavaScript.

JS Code

Speedy emails, satisfied customers

Top comments (0)

The Next Generation Developer Platform

Read next

Best Practices for Enhancing Mobile App Security in the Modern Threat Landscape

Finally got some time to play with the new JSONata and Variables support for Step Functions, and I have to say, it is massive improvement. Check out my latest blog post, where I walk through a simple example of how easy it is to handle pagination now

React 19: New hook useActionState

What I'd Like to Learn in 2025

Okay