Today I learn how to insert, read, update and delete only JavaScript. first, create a new form in HTML and add id new create function and condition now add CSS style and better this design
CRUD Operation only Javascript
Follow me and watch how to one page in crud operation on one page only for JavaScript using. First, create form now show this add data then how to update this data then now the last how to delete the data add now done crud operation in JavaScript.
code here this code copy and create index.html file.
<!DOCTYPE html>
<html>
<head>
<title>
ONLY JAVASCRIPT USING CREAT READ UPDATE AND DELETE
</title>
<style type="text/css">
body > table{
width: 80%;
}
table{
border-collapse: collapse;
}
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: 12px 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: #ddd;
color: #000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
table{
border: 1px solid #000;
margin: 0 auto;
}
form div.form-action-buttons{
text-align: center;
}
form
{
padding: 10px;
border: 1px solid #000;
width: 50%;
margin: 10px auto;
}
form a{
cursor: pointer;
text-decoration: underline;
color: #0000ee;
margin-right: 4px;
}
label.validation-error{
color: red;
margin-left: 5px;
}
h1{
text-align: center;
text-transform: uppercase;
}
.hide{
display:none;
}
</style>
</head>
<body>
<h1>only Javascript Using creat read update and delete</h1>
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div>
<label>First Name*</label><label class="validation-error hide" id="firstnameValidationError">This field is required.</label>
<input type="text" name="firstname" id="firstname">
</div>
<div>
<label>Last Name*</label>
<input type="text" name="lastname" id="lastname">
</div>
<div>
<label>Age*</label>
<input type="text" name="age" id="age">
</div>
<div>
<label>Address*</label>
<input type="text" name="address" id="address">
</div>
<div class="form-action-buttons">
<input type="submit" value="Submit">
</div>
</form>
<table id="employeeList">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var selectedRow = null
function onFormSubmit() {
if (validate()) {
var formData = readFormData();
if (selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData);
resetForm();
}
}
function readFormData() {
var formData = {};
formData["firstname"] = document.getElementById("firstname").value;
formData["lastname"] = document.getElementById("lastname").value;
formData["age"] = document.getElementById("age").value;
formData["address"] = document.getElementById("address").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.firstname;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.lastname;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.age;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.address;
cell4 = newRow.insertCell(4);
cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
<a onClick="onDelete(this)">Delete</a>`;
}
function resetForm() {
document.getElementById("firstname").value = "";
document.getElementById("lastname").value = "";
document.getElementById("age").value = "";
document.getElementById("address").value = "";
selectedRow = null;
}
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("firstname").value = selectedRow.cells[0].innerHTML;
document.getElementById("lastname").value = selectedRow.cells[1].innerHTML;
document.getElementById("age").value = selectedRow.cells[2].innerHTML;
document.getElementById("address").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.firstname;
selectedRow.cells[1].innerHTML = formData.lastname;
selectedRow.cells[2].innerHTML = formData.age;
selectedRow.cells[3].innerHTML = formData.address;
}
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("firstname").value == "") {
isValid = false;
document.getElementById("firstnameValidationError").classList.remove("hide");
} else {
isValid = true;
if (!document.getElementById("firstnameValidationError").classList.contains("hide"))
document.getElementById("firstnameValidationError").classList.add("hide");
}
return isValid;
}
</script>
</body>
</html>Check the live demo here CRUD Javascript form check out
only Javascript Using creat read update and delete
| First Name | Last Name | Age | Address | Action |
|---|
