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

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