Twoja wyszukiwarka
<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>