How To Search For Specific Data In A Table Using JavaScript

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

In Java Script we can filter data or we can search for particular data so today we are going to discuss how to filter or search data using java script

How To Search For Specific Data In A Table Using JavaScript

Create A Filtered Table
Step 1:
 Create index.html file and implement below code in it.

<input type="text" id="Input" onkeyup="seacrh()" placeholder="Search for names.." title="Type in a name">

<table id="Table">
    <tr class="header">
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>India</td>
    </tr>
    <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Koniglich Essen</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Italy</td>
    </tr>
    <tr>
        <td>North/South</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Paris specialites</td>
        <td>France</td>
    </tr>
</table>



 

Step 2:Now we create css code for list of items so implement below code in index.html file

Style the input element and the list:
<style>
    h1{
        color:red;
    }
    * {
        box-sizing: border-box;
    }

    #Input {
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
    }

    #Table {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #ddd;
        font-size: 18px;
    }

    #Table th, #myTable td {
        text-align: left;
        padding: 12px;
    }

    #Table tr {
        border-bottom: 1px solid #ddd;
    }

    #Table tr.header, #myTable tr:hover {
        background-color: #f1f1f1;
    }
</style>
 

Step 3:Now we implement javascript to search items in a table

<script>
    function seacrh() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("Input");
        filter = input.value.toUpperCase();
        table = document.getElementById("Table");
        tr = table.getElementsByTagName("tr");
        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>


Complete Code For Searching For Specific Data In A Table Using JavaScript
<!DOCTYPE html>
<html>
<head>
    <title>How To Search For Specific Data In A Table Using JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1{
        color:red;
    }
    * {
        box-sizing: border-box;
    }

    #Input {
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
    }

    #Table {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #ddd;
        font-size: 18px;
    }

    #Table th, #myTable td {
        text-align: left;
        padding: 12px;
    }

    #Table tr {
        border-bottom: 1px solid #ddd;
    }

    #Table tr.header, #myTable tr:hover {
        background-color: #f1f1f1;
    }
</style>

<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>How To Search For Specific Data In A Table Using JavaScript</h1>
    </div>
    <br>
        <div class="well">
            <h2>Employee </h2>

            <input type="text" id="Input" onkeyup="seacrh()" placeholder="Search for names.." title="Type in a name">

            <table id="Table">
                <tr class="header">
                    <th style="width:60%;">Name</th>
                    <th style="width:40%;">Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>India</td>
                </tr>
                <tr>
                    <td>Berglunds snabbkop</td>
                    <td>Sweden</td>
                </tr>
                <tr>
                    <td>Island Trading</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>Koniglich Essen</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Laughing Bacchus Winecellars</td>
                    <td>Canada</td>
                </tr>
                <tr>
                    <td>Magazzini Alimentari Riuniti</td>
                    <td>Italy</td>
                </tr>
                <tr>
                    <td>North/South</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>Paris specialites</td>
                    <td>France</td>
                </tr>
            </table>

            <script>
                function seacrh() {
                    var input, filter, table, tr, td, i, txtValue;
                    input = document.getElementById("Input");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("Table");
                    tr = table.getElementsByTagName("tr");
                    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>
        </div>
    <div>
</body>
</html>

Related Post