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

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

SQL

I have put in my best efforts to ensure the task's completion meets the expected standards and aligns with the desired outcomes. I have also attached any relevant documents, reports, or deliverables associated with the task for your convenience. Should you require any further information or clarification regarding the completed task, please do not hesitate to reach out to me. I am available to discuss any aspects in more detail or provide additional support as needed. Thank you for entrusting me with this task. I look forward to your feedback and guidance on the next steps or any revisions required. SELECT (SELECT COUNT(*) FROM USER_TABLES) AS table_count, (SELECT COUNT(*) FROM USER_VIEWS) AS view_count, (SELECT COUNT(*) FROM USER_INDEXES) AS index_count FROM DUAL; SELECT      (SELECT COUNT(*) FROM USER_TABLES) AS table_count,     (SELECT COUNT(*) FROM USER_VIEWS) AS view_count,     (SELECT COUNT(*) FROM USER_INDEXES) AS index_count,     (SELECT COUNT(*) FROM USER_TABL
Read more