Scribd
Upload
3 views

JSON Array -CRUD OPeration

The document provides a JavaScript implementation for CRUD operations on employee data using an HTML interface. It includes functions to create, read, update, and delete employee records, displaying them in a table format. The code utilizes an array to store employee information and employs event-driven programming to handle user interactions.

Uploaded by

priticsonwane22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

JSON Array -CRUD OPeration

The document provides a JavaScript implementation for CRUD operations on employee data using an HTML interface. It includes functions to create, read, update, and delete employee records, displaying them in a table format. The code utilizes an array to store employee information and employs event-driven programming to handle user interactions.

Uploaded by

priticsonwane22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

JSON Array CRUD Operations

C => Create /Insert


R => Read
U => Update
D => Delete

foreach loop => It fetch the data row wise

Array.forEach(function(d,i){

===================================================================================
============================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
let EmployeeData = [];
let index = -1;

function AddEmployee() {

let empid = document.getElementById("txtempid").value;


let n= document.getElementById("txtname").value;
let m = document.getElementById("txtmobile").value;
let e= document.getElementById("txtemail").value;
let d = document.getElementById("txtdesignation").value;
let emp = { "eid": empid, "name": n, "mobile": m, "email": e,
"designation": d };
EmployeeData.push(emp);
console.log(EmployeeData);
DisplayData();
ClearData();

function DisplayData() {

let data = "";


EmployeeData.forEach(function (d, i) {
data += "<tr><td>" + d.eid + "</td><td>" + d.name + "</td><td>" +
d.mobile + "</td><td>" + d.email + "</td><td>" + d.designation
+ "</td><td>" + "<input type='button' onclick='EditData(" + i +
")' value='Edit'/>"
+ "<input type='button' onclick='DeleteData(" + i + ")'
value='Delete'/>" + "</td></tr>";

})

document.getElementById("tbldata").innerHTML = data;
}

function EditData(p) {
index = p;
let e = EmployeeData[p];
document.getElementById("txtempid").value = e.eid;
document.getElementById("txtname").value = e.name;
document.getElementById("txtmobile").value = e.mobile;
document.getElementById("txtemail").value = e.email;
document.getElementById("txtdesignation").value = e.designation;

function ClearData() {
document.getElementById("txtempid").value="";
document.getElementById("txtname").value="";
document.getElementById("txtmobile").value="";
document.getElementById("txtemail").value="";
document.getElementById("txtdesignation").value="";

function UpdateEmployee() {

let empid = document.getElementById("txtempid").value;


let n = document.getElementById("txtname").value;
let m = document.getElementById("txtmobile").value;
let e = document.getElementById("txtemail").value;
let d = document.getElementById("txtdesignation").value;
let emp = { "eid": empid, "name": n, "mobile": m, "email": e,
"designation": d };
EmployeeData[index] = emp;

DisplayData();
ClearData();

function DeleteData(d) {
EmployeeData.splice(d, 1);
DisplayData();

</script>
</head>
<body>
<table border="1">
<tr>
<th>Employee ID</th>
<td><input type="text" id="txtempid" /></td>
</tr>
<tr>
<th>Name</th>
<td><input type="text" id="txtname" /></td>
</tr>
<tr>
<th>Mobile</th>
<td><input type="text" id="txtmobile" /></td>
</tr>
<tr>
<th>Email</th>
<td><input type="text" id="txtemail" /></td>
</tr>
<tr>
<th>Designation</th>
<td><input type="text" id="txtdesignation" /></td>
</tr>

<tr>
<td colspan="2"><input type="button" value="AddEmployee"
onclick="AddEmployee()" />
<input type="button" value="UpdateEmployee"
onclick="UpdateEmployee()" />
</td>
</tr>
</table>

<hr />

<table border="1">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Designation</th>
<th>Action</th>

</tr>
</thead>
<tbody id="tbldata"></tbody>
</table>
</body>
</html>

You might also like