PLSQL - "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 plsql (dodał(a) jejshd @ 2023-03-28 08:55:31)
