Code a simple html page with filter applied on table

 


<!DOCTYPE html>

<html>

<head>

    <title>Table Filter Example</title>

    <style>

        table {

            border-collapse: collapse;

            width: 100%;

        }


        th, td {

            border: 1px solid black;

            padding: 8px;

            text-align: left;

        }

    </style>

</head>

<body>

    <input type="text" id="filterInput" placeholder="Filter">

    <br><br>

    <table id="myTable">

        <tr>

            <th>Name</th>

            <th>Age</th>

            <th>City</th>

        </tr>

        <tr>

            <td>John Doe</td>

            <td>25</td>

            <td>New York</td>

        </tr>

        <tr>

            <td>Jane Smith</td>

            <td>30</td>

            <td>London</td>

        </tr>

        <tr>

            <td>Mark Johnson</td>

            <td>35</td>

            <td>Paris</td>

        </tr>

        <tr>

            <td>Sarah Williams</td>

            <td>28</td>

            <td>New York</td>

        </tr>

    </table>


    <script>

        const filterInput = document.getElementById("filterInput");

        filterInput.addEventListener("keyup", filterTable);


        function filterTable() {

            const filterValue = filterInput.value.toLowerCase();

            const table = document.getElementById("myTable");

            const rows = table.getElementsByTagName("tr");


            for (let i = 1; i < rows.length; i++) {

                const row = rows[i];

                const cells = row.getElementsByTagName("td");

                let found = false;


                for (let j = 0; j < cells.length; j++) {

                    const cell = cells[j];


                    if (cell) {

                        const cellValue = cell.textContent || cell.innerText;


                        if (cellValue.toLowerCase().indexOf(filterValue) > -1) {

                            found = true;

                            break;

                        }

                    }

                }


                if (found) {

                    row.style.display = "";

                } else {

                    row.style.display = "none";

                }

            }

        }

    </script>

</body>

</html>


Comments

Post a Comment

Popular posts from this blog

Java Practice Questions MCQ

1. What is the output? class point1 { static void a (int x, int y) { this.x=x; //non-static variable this cannot be referenced from a static context this.y=y; System.out.println(x+ “,”+y); } } class point { public static void main (String[] args) { point1 pp=new point1(); pp.a(4,3); } } a. 4 ,3 b. 3 ,4 c. Compile Error d. None of the above ------------------------------------------------------------------------------------------------------- 2. Local variables cannot be declared as final.(True / False) .... False ----------------------------------------------------------------------------------------------------- 3. What is the output? class A { A(int x, int y) { this.x=x; this.y=y; } A() { this(2,3); } public static void main(String[] args) { A a1 = new A(); System.out.println(“x=”+a1.x+”,y=”+a1.y); // cannot find symbol x and y } } a. x=2 y=3 b. x=-1...
Read more

Linux Assignments - Practise

UNIX ASSIGNMENTS: Day 1 Concept : Basic commands in UNIX, Filters, Pipes Objective : Participant will be able to: ·          Execute Basic Unix commands ·          Implement the concepts of Pipes and Filters ·          Work with vi editor Problems: Section 1: 1.        List all the files and sub directories of the directory /bin. 2.        List all the files including hidden files in your current directory. 3.        List all the files starting with letter ‘r’ in your current directory. 4.        List all the files having three characters in their names, from your current directory. 5.        List all the files with extension ‘.doc’ in your current directory. 6.     ...
Read more

HackerRank Introduction Challenges - Java

HackerRank Introduction Challenges - Java Welcome to Java! Problem Statement Welcome to the world of Java! Just print "Hello World." and "Hello Java." in two separate lines to complete this challenge. The code stub in the editor already creates the main function and solution class. All you have to do is copy and paste the following lines inside the main function. System.out.println("Hello World."); System.out.println("Hello Java."); Sample Output Hello World. Hello Java. Download Code Here Java Stdin and Stdout 1 Problem Statement In most of the Hackerrank challenges, you need to read input from stdin (standard input) and write your output in stdout (standard output). One way to take input from stdin is to use Scanner class and reading from System.in. You can write your output to stdout simply using System.out.printf function. In this problem you need to read 3 integers from stdin and print them ...
Read more