Scribd
Upload
2 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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 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
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