QBASIC - "bebdb" - Kashub's Code Barn

<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>
Kashub's Code Barn - "bebdb"

podświetlone jako qbasic (dodał(a) jejshd @ 2023-03-28 08:45:52)
