In this tutorial, we will learn how to create a CRUD (Create, Read, Update, and Delete) application with plain JavaScript. We are not going to use any JavaScript frameworks instead we use plain JavaScript, CSS, and HTML to build a CRUD application.
Angular CRUD example at https://www.javaguides.net/2020/01/angular-9-crud-example-tutorial.html
React CRUD example at https://www.javaguides.net/2020/07/react-js-crud-application-example.html
Let's develop step by step CRUD application ( Employee Management App) using HTML, CSS, and JavaScript.
1. Create HTML Page
Let's create an HTML file named index.html and add the following content to it:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript CRUD Example Tutorial
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><center>JavaScript CRUD Example Tutorial</center></h1>
<hr>
<div class="employee-form">
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div>
<label>Full Name*</label><label class="validation-error hide" id="fullNameValidationError">This field is required.</label>
<input type="text" name="fullName" id="fullName">
</div>
<div>
<label>Email Id</label>
<input type="text" name="email" id="email">
</div>
<div>
<label>Salary</label>
<input type="text" name="salary" id="salary">
</div>
<div>
<label>City</label>
<input type="text" name="city" id="city">
</div>
<div class="form-action-buttons">
<input type="submit" value="Submit">
</div>
</form>
</div>
<br/>
<div class = "employees-table">
<table class="list" id="employeeList">
<thead>
<tr>
<th>Full Name</th>
<th>Email Id</th>
<th>Salary</th>
<th>City</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>Note that we have created an Employee form to add new employees to the list. We have also created an HTML table to list newly created employees.
We have assigned a unique id to fullName, email, salary, and city input elements in HTML form:
<input type="text" name="fullName" id="fullName">
<input type="text" name="email" id="email">
<input type="text" name="salary" id="salary">
<input type="text" name="city" id="city">2. CRUD operations in JavaScript
Let's create a JavaScript named script.js to handle CRUD operations in JavaScript and the following content to it:
var selectedRow = null
function onFormSubmit() {
if (validate()) {
var formData = readFormData();
if (selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData);
resetForm();
}
}
function readFormData() {
var formData = {};
formData["fullName"] = document.getElementById("fullName").value;
formData["email"] = document.getElementById("email").value;
formData["salary"] = document.getElementById("salary").value;
formData["city"] = document.getElementById("city").value;
return formData;
}
function insertNewRecord(data) {
var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.fullName;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.email;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.salary;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.city;
cell4 = newRow.insertCell(4);
cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
<a onClick="onDelete(this)">Delete</a>`;
}
function resetForm() {
document.getElementById("fullName").value = "";
document.getElementById("email").value = "";
document.getElementById("salary").value = "";
document.getElementById("city").value = "";
selectedRow = null;
}
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("fullName").value = selectedRow.cells[0].innerHTML;
document.getElementById("email").value = selectedRow.cells[1].innerHTML;
document.getElementById("salary").value = selectedRow.cells[2].innerHTML;
document.getElementById("city").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.fullName;
selectedRow.cells[1].innerHTML = formData.email;
selectedRow.cells[2].innerHTML = formData.salary;
selectedRow.cells[3].innerHTML = formData.city;
}
function onDelete(td) {
if (confirm('Are you sure to delete this record ?')) {
row = td.parentElement.parentElement;
document.getElementById("employeeList").deleteRow(row.rowIndex);
resetForm();
}
}
function validate() {
isValid = true;
if (document.getElementById("fullName").value == "") {
isValid = false;
document.getElementById("fullNameValidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("fullNameValidationError").classList.contains("hide"))
document.getElementById("fullNameValidationError").classList.add("hide");
}
return isValid;
}Let's understand the above JavaScript code.
Handling HTML form submission with the following function:
function onFormSubmit() {
if (validate()) {
var formData = readFormData();
if (selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData);
resetForm();
}
}After HTML form submission, create a new record dynamically in HTML table with the following function:
function insertNewRecord(data) {
var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.fullName;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.email;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.salary;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.city;
cell4 = newRow.insertCell(4);
cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
<a onClick="onDelete(this)">Delete</a>`;
}Note that we have added Edit and Delete buttons dynamically for each record in the HTML table.
Reset the HTML form with the following JavaScript function:
function resetForm() {
document.getElementById("fullName").value = "";
document.getElementById("email").value = "";
document.getElementById("salary").value = "";
document.getElementById("city").value = "";
selectedRow = null;
}Handle edit operation for each row in HTML table with the following JavaScript function:
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("fullName").value = selectedRow.cells[0].innerHTML;
document.getElementById("email").value = selectedRow.cells[1].innerHTML;
document.getElementById("salary").value = selectedRow.cells[2].innerHTML;
document.getElementById("city").value = selectedRow.cells[3].innerHTML;
}Note that for edit operation, we populate HTML form with row data.
After edit operation, we need to show updated data in an HTML table like:
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.fullName;
selectedRow.cells[1].innerHTML = formData.email;
selectedRow.cells[2].innerHTML = formData.salary;
selectedRow.cells[3].innerHTML = formData.city;
}Handled delete operation with the following JavaScript function:
function onDelete(td) {
if (confirm('Are you sure to delete this record ?')) {
row = td.parentElement.parentElement;
document.getElementById("employeeList").deleteRow(row.rowIndex);
resetForm();
}
}Note that we are using deleteRow() function to delete row from HTML table.
We also added validation to the fullName field:
function validate() {
isValid = true;
if (document.getElementById("fullName").value == "") {
isValid = false;
document.getElementById("fullNameValidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("fullNameValidationError").classList.contains("hide"))
document.getElementById("fullNameValidationError").classList.add("hide");
}
return isValid;
}3. Styling HTML Page
Now let's add some CSS to HTML to make the web page stylish.
Let's create a CSS file named style.css and add the following content to it:
.employee-form {
border-style: solid;
/* margin-bottom: 10px; */
/* margin-left: 10px; */
padding: 10px;
/* width: 50%; */
margin: auto;
width: 50%;
/* border: 3px solid green; */
/* padding: 10px; */
}
.employees-table {
border-style: solid;
/* margin-bottom: 10px; */
/* margin-left: 10px; */
padding: 20px;
/* width: 50%; */
margin: auto;
width: 70%;
/* border: 3px solid green; */
/* padding: 10px; */
}
body > table{
width: 80%;
}
table{
border-collapse: collapse;
}
table.list{
width:100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even),table.list thead>tr {
background-color: #dddddd;
}
input[type=text], input[type=number] {
width: 100%;
padding: 8px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
background-color: black;
color: white;
padding: 10px 18px;
/* margin: 0px 0; */
border: none;
border-radius: 5px;
cursor: pointer;
}
form div.form-action-buttons{
text-align: right;
}
a{
cursor: pointer;
text-decoration: underline;
color: #0000ee;
margin-right: 4px;
}
label.validation-error{
color: red;
margin-left: 5px;
}
.hide{
display:none;
}Run index.html in Browser
Let's open index.html file browser will output below web page:
Add employee to the table using HTML form:
Comments
Post a Comment
Leave Comment