Kashub's Code Barn - "bebdb"

podświetlone jako thinbasic (dodał(a) jejshd @ 2023-03-28 08:55:31)

Twoja wyszukiwarka
Podświetl ten kod w:
Ostatnio dodane:
Losowe wpisy:
<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%; width: 20%; 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();
        }
      }
    }
 
    // Function to make the table editable
    function makeTableEditable() {
      // Get all the table cells
      var cells = $("#data-table tbody td");
      // Loop through the cells and add a click event handler
        for (var i = 0; i < cells.length; i++) {
          var cell = $(cells[i]);
          cell.click(function() {
            // Get the current cell value
            var value = $(this).text();
            // Create an input element with the same value
            var input = $("<input type='text' value='" + value + "'>");
            // Replace the cell content with the input element
            $(this).html(input);
            // Focus on the input element
            input.focus();
            // When the input element loses focus
            input.blur(function() {
              // Get the new value
              var newValue = $(this).val();
              // Replace the input element with the new value
              $(this).parent().text(newValue);
            });
          });
        }
      }
    }
 
    // 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);
        // Make the table editable
        makeTableEditable();
        // 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>
| Wózki dla dzieci | | Opony letnie | | Opony motocyklowe | | Dyskretny sexshop internetowy | | Blog o książkach | | Blogi za darmo | | Skróć link | | Gnieżdżewo | | Opisy na Facebooka |