<html> <head> <!-- Bootstrap CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Material Design CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Bootstrap JS CDN --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <!-- Material Design JS CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script> </head> <body> <div class="container-fluid"> <!-- Button to create table --> <button id="create-table" class="btn btn-primary btn-lg" STYLE="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">CREATE Table</button> <!-- Search bar to filter table --> <INPUT id="search-table" class="form-control" TYPE="text" placeholder="Search table..." STYLE="position: absolute; top: 10%; right: 10%; display: none;"> <!-- Table to display data --> <TABLE id="data-table" class="table table-striped table-bordered mdl-data-table mdl-js-data-table mdl-shadow--2dp" STYLE="position: absolute; top: 20%; left: 10%; display: none;"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric">Name</th> <th>Age</th> <th>Gender</th> <th>Country</th> </tr> </thead> <tbody id="table-body"> <!-- Table rows will be added dynamically --> </tbody> </table> </div> <script> // Sample DATA FOR the TABLE var DATA = [ {name: "Alice", age: 25, gender: "Female", country: "USA"}, {name: "Bob", age: 32, gender: "Male", country: "UK"}, {name: "Charlie", age: 28, gender: "Male", country: "Canada"}, {name: "David", age: 23, gender: "Male", country: "Australia"}, {name: "Eve", age: 27, gender: "Female", country: "France"} ]; // FUNCTION TO CREATE a TABLE ROW FROM an object FUNCTION createTableRow(obj) { var ROW = $("<tr></tr>"); FOR (var KEY IN obj) { IF (KEY === "name") { // Name COLUMN IS non-NUMERIC ROW.append($("<td class='mdl-data-table__cell--non-numeric'></td>").text(obj[KEY])); } ELSE { // Other COLUMNS are NUMERIC ROW.append($("<td></td>").text(obj[KEY])); } } RETURN ROW; } // FUNCTION TO CREATE a TABLE FROM an array OF objects FUNCTION createTable(DATA) { var tableBody = $("#table-body"); // Clear the TABLE body tableBody.empty(); // Loop through the DATA AND append ROWS FOR (var i = 0; i < DATA.length; i++) { tableBody.append(createTableRow(DATA[i])); } } // FUNCTION TO FILTER the TABLE BY a SEARCH term FUNCTION filterTable(term) { // GET ALL the TABLE ROWS var ROWS = $("#data-table tbody tr"); // Loop through the ROWS AND hide OR SHOW them based ON the term FOR (var i = 0; i < ROWS.length; i++) { var ROW = $(ROWS[i]); // GET the text content OF the ROW var text = ROW.text().toLowerCase(); // CHECK IF the term IS IN the text IF (text.indexOf(term.toLowerCase()) > -1) { // SHOW the ROW ROW.show(); } ELSE { // Hide the ROW ROW.hide(); } } } // WHEN the document IS ready $(document).ready(FUNCTION() { // WHEN the CREATE TABLE button IS clicked $("#create-table").click(FUNCTION() { // CREATE the TABLE FROM the DATA createTable(DATA); // Animate the button TO the top LEFT corner $(this).animate({top: "10%", LEFT: "10%"}, 1000); // Fade IN the SEARCH bar AND the TABLE $("#search-table").fadeIn(1000); $("#data-table").fadeIn(1000); }); // WHEN the SEARCH bar VALUE changes $("#search-table").on("input", FUNCTION() { // GET the SEARCH term var term = $(this).val(); // FILTER the TABLE BY the term filterTable(term); }); }); </script> </body> </html>