JavaScript / jQuery CRUD App

index.html

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h3>ADD USER</h3>
      <form id="addUser" action="">
        <div class="form-group">
          <input class="form-control" type="text" name="name" placeholder="Name" required>
        </div>
        <div class="form-group">
          <input class="form-control" type="text" name="address" placeholder="Address" required>
        </div>
        <div class="form-group">
          <input class="form-control" type="number" name="age" min="10" max="100" placeholder="Age" required>
        </div>
        <button class="btn btn-primary form-control" type="submit">SUBMIT</button>
      </form>
    </div>
    <div class="col-md-8">
      <h3>USERS</h3>
      <table id="userTable" class="table table-striped">
        <tr>
          <th>Name</th>
          <th>Address</th>
          <th colspan="3">Age</th>
        </tr>
      </table>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Update User</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

javascript-jquery-crud-app.markdown

JavaScript / jQuery CRUD App

Simple JavaScript web app that creates, reads, updates and deletes data in memory.

A Pen by ahmed on CodePen.

License.

script.js

var users = [
  {
    id: 1,
    name: "Bob",
    address: "Manila",
    age: 27
  },
  {
    id: 2,
    name: "Harry",
    address: "Baguio",
    age: 32
  }
];

$.each(users, function(i, user) {
  appendToUsrTable(user);
});

$("form").submit(function(e) {
  e.preventDefault();
});

$("form#addUser").submit(function() {
  var user = {};
  var nameInput = $('input[name="name"]').val().trim();
  var addressInput = $('input[name="address"]').val().trim();
  var ageInput = $('input[name="age"]').val().trim();
  if (nameInput && addressInput && ageInput) {
    $(this).serializeArray().map(function(data) {
      user[data.name] = data.value;
    });
    var lastUser = users[Object.keys(users).sort().pop()];
    user.id = lastUser.id + 1;

    addUser(user);
  } else {
    alert("All fields must have a valid value.");
  }
});

function addUser(user) {
  users.push(user);
  appendToUsrTable(user);
}

function editUser(id) {
  users.forEach(function(user, i) {
    if (user.id == id) {
      $(".modal-body").empty().append(`
                <form id="updateUser" action="">
                    <label for="name">Name</label>
                    <input class="form-control" type="text" name="name" value="${user.name}"/>
                    <label for="address">Address</label>
                    <input class="form-control" type="text" name="address" value="${user.address}"/>
                    <label for="age">Age</label>
                    <input class="form-control" type="number" name="age" value="${user.age}" min=10 max=100/>
            `);
      $(".modal-footer").empty().append(`
                    <button type="button" type="submit" class="btn btn-primary" onClick="updateUser(${id})">Save changes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </form>
            `);
    }
  });
}

function deleteUser(id) {
  var action = confirm("Are you sure you want to delete this user?");
  var msg = "User deleted successfully!";
  users.forEach(function(user, i) {
    if (user.id == id && action != false) {
      users.splice(i, 1);
      $("#userTable #user-" + user.id).remove();
      flashMessage(msg);
    }
  });
}

function updateUser(id) {
  var msg = "User updated successfully!";
  var user = {};
  user.id = id;
  users.forEach(function(user, i) {
    if (user.id == id) {
      $("#updateUser").children("input").each(function() {
        var value = $(this).val();
        var attr = $(this).attr("name");
        if (attr == "name") {
          user.name = value;
        } else if (attr == "address") {
          user.address = value;
        } else if (attr == "age") {
          user.age = value;
        }
      });
      users.splice(i, 1);
      users.splice(user.id - 1, 0, user);
      $("#userTable #user-" + user.id).children(".userData").each(function() {
        var attr = $(this).attr("name");
        if (attr == "name") {
          $(this).text(user.name);
        } else if (attr == "address") {
          $(this).text(user.address);
        } else {
          $(this).text(user.age);
        }
      });
      $(".modal").modal("toggle");
      flashMessage(msg);
    }
  });
}

function flashMessage(msg) {
  $(".flashMsg").remove();
  $(".row").prepend(`
        <div class="col-sm-12"><div class="flashMsg alert alert-success alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>${msg}</strong></div></div>
    `);
}

function appendToUsrTable(user) {
  $("#userTable > tbody:last-child").append(`
        <tr id="user-${user.id}">
            <td class="userData" name="name">${user.name}</td>
            '<td class="userData" name="address">${user.address}</td>
            '<td id="tdAge" class="userData" name="age">${user.age}</td>
            '<td align="center">
                <button class="btn btn-success form-control" onClick="editUser(${user.id})" data-toggle="modal" data-target="#myModal")">EDIT</button>
            </td>
            <td align="center">
                <button class="btn btn-danger form-control" onClick="deleteUser(${user.id})">DELETE</button>
            </td>
        </tr>
    `);
}

scripts

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

body {
  background: #2c3e50;
  color: white;
  font-family: monospace;
}
input, .modal {
  color: black;
}
.table-striped > tbody > tr:nth-child(2n + 1) > td,
.table-striped > tbody > tr:nth-child(2n + 1) > th {
  background-color: #34495e;
}
.row .alert {
  margin-top: 25px;
}
th, td {
  border-top: none !important;
}

h3 {
  background-color: #333;
  padding: 12px;
  border-top-right-radius: 20px;
  font-weight: bolder;
  letter-spacing: .1em;
}

.modal-content{
  border-radius: 0;
}

.modal-header, .modal-footer {
  background-color: #333;
  color: white;
  border: 0;
}

.modal-body {
  background: #2c3e50;
  color: white;
}

.close, .close:hover {
  color: white;
}

.btn {
  font-weight: bolder;
  letter-spacing: .2em;
}