Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Sep 18th, 2018 55 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. !DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title> CRUD</title>
  6.   <style>
  7.     input[type='submit'], button, [aria-label]{
  8.       cursor: pointer;
  9.     }
  10.     #spoiler{
  11.       display: none;
  12.     }
  13.   </style>
  14. </head>
  15. <body>
  16.  
  17. <form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
  18.   <input type="text" id="add-name" placeholder="New Person">
  19.   <input type="submit" value="Add">
  20. </form>
  21.  
  22. <div id="spoiler" role="aria-hidden">
  23.   <form action="javascript:void(0);" method="POST" id="saveEdit">
  24.     <input type="text" id="edit-name">
  25.     <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
  26.   </form>
  27. </div>
  28.  
  29. <p id="counter"></p>
  30.  
  31. <table>
  32.   <tr>
  33.     <th>First Name</th>
  34.     <th>Middle Name</th>
  35.     <th>Last Name</th>
  36.     <th>Email</th>
  37.     <th>Address</th>
  38.     <th>Address</th>
  39.     <th>DOB</th>
  40.     <th>City</th>
  41.     <th>State</th>
  42.     <th>Zip</th>
  43.   </tr>
  44.     <tbody id="People">
  45.     </tbody>
  46. </table>
  47.  
  48. <script>
  49. var app = new function() {
  50.   this.el = document.getElementById('People');
  51.   this.PeopleFirstName = ['David', 'Morgan', 'John', 'Aaron', 'Billy'];
  52.   this.PeopleLastName=['white','white','jacobs','rodgers','corgan']
  53.   this.Count = function(data) {
  54.     var el   = document.getElementById('counter');
  55.     var name = 'person';
  56.     if (data) {
  57.       if (data > 1) {
  58.         name = 'People';
  59.       }
  60.       el.innerHTML = data + ' ' + name ;
  61.     } else {
  62.       el.innerHTML = 'No ' + name;
  63.     }
  64.   };
  65.  
  66.   this.FetchAll = function() {
  67.     var data = '';
  68.     if (this.People.length > 0) {
  69.       for (i = 0; i < this.People.length; i++) {
  70.         data += '<tr>';
  71.         data += '<td>' + this.PeopleFirstName[i] + '</td>';
  72.         data += '<td>' + this.PeopleLastName[i] + '</td>';
  73.         data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
  74.         data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
  75.         data += '</tr>';
  76.       }
  77.     }
  78.     this.Count(this.People.length);
  79.     return this.el.innerHTML = data;
  80.   };
  81.   this.Add = function () {
  82.     el = document.getElementById('add-name');
  83.    
  84.     var person = el.value;
  85.     if (person) {
  86.      
  87.       this.People.push(person.trim());
  88.    
  89.       el.value = '';
  90.      
  91.       this.FetchAll();
  92.     }
  93.   };
  94.   this.Edit = function (item) {
  95.     var el = document.getElementById('edit-name');
  96.    
  97.     el.value = this.People[item];
  98.    
  99.     document.getElementById('spoiler').style.display = 'block';
  100.     self = this;
  101.     document.getElementById('saveEdit').onsubmit = function() {
  102.    
  103.       var person = el.value;
  104.       if (person) {
  105.        
  106.         self.People.splice(item, 1, person.trim());
  107.        
  108.         self.FetchAll();
  109.        
  110.         CloseInput();
  111.       }
  112.     }
  113.   };
  114.   this.Delete = function (item) {
  115.    
  116.     this.People.splice(item, 1);
  117.  
  118.     this.FetchAll();
  119.   };
  120.  
  121. }
  122. app.FetchAll();
  123. function CloseInput() {
  124.   document.getElementById('spoiler').style.display = 'none';
  125. }
  126. </script>
  127. </body>
  128. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top