In this blog, we will learn to create a simple Inline editing operation with the help of jQuery/JavaScript.
Prerequisites:
- Basic Knowlegde of HTML
- JavaScript
- jQuery
Let’s start creating our application.
Create an Index.html and place the following code in the body section. You need to import the jQuery and Bootstrap CDN from online.
<!DOCTYPE html>
<html>
<head>
<title>Inline Editing</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-inline">
<label for="firstname" class="control-label">First Name :</label>
<input type="text" class="form-control col-sm-1" placeholder=" Name" id="txtfirstname" style="padding-left: 10px;" />
<input type="hidden" id="hdnStudentId" value="0" />
<label for="address" class="control-label">Address :</label>
<input type="text" class="form-control col-sm-1" placeholder="Address" id="txtaddress" style="padding-left: 10px;" />
<label for="address" class="control-label">Hobboies :</label>
<input type="text" class="form-control col-sm-1" placeholder="hobbies" id="txthobbies" style="padding-left: 10px;" />
<label for="address" class="control-label">Gender :</label>
<input type="text" class="form-control col-sm-1" placeholder="Gender" id="txtgender" style="padding-left: 10px;" />
<label for="address" class="control-label">Class :</label>
<input type="text" class="form-control col-sm-1" placeholder="class" id="txtclass" style="padding-left: 10px;" />
<input type="button" class="btn btn-success col-sm-1 form-control" id="btnSaveStudent" value="Add" /> </div>
<div class="row">
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-striped" style="background-color: aliceblue;" id="tblStudentList">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Hobbies</th>
<th>Gender</th>
<th>Class</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
<script src="Index.js"></script>
</html>
Now, create an Index.js and place the following code in it.
var studentDTO = [];
$(document).on('click', '#btnSaveStudent', function () {
validation()
});
function validation() {
if ($('#txtfirstname').val() == "") {
alert("Please enter name value");
}
else if ($('#txtaddress').val() == "") {
alert("please enter address");
}
else if ($('#txthobbies').val() == "") {
alert("please enter hobbies");
}
else if ($('#txtgender').val() == "") {
alert("please enter gender");
}
else if ($('#txtclass').val() == "") {
alert("please enter class");
}
else {
addStudentData();
}
}
function addStudentData() {
var name = $('#txtfirstname').val();
var address = $('#txtaddress').val();
var hobbies = $('#txthobbies').val();
var gender = $('#txtgender').val();
var studentclass = $('#txtclass').val();
studentDTO.push({
id: studentDTO.length + 1,
name: name,
address: address,
hobbies: hobbies,
gender: gender,
studentclass: studentclass,
})
displayStudent();
$('#txtfirstname').val("");
$('#txtaddress').val("");
$('#txthobbies').val("");
$('#txtgender').val("");
$('#txtclass').val("");
}
function displayStudent() {
var htmlString = "";
for (var i = 0; i < studentDTO.length; i++) {
htmlString += `<tr>
<td class="student-name">${studentDTO[i].name}</td>
<td class="student-address">${studentDTO[i].address}</td>
<td class="student-hobbies">${studentDTO[i].hobbies}</td>
<td class="student-gender">${studentDTO[i].gender}</td>
<td class="student-class">${studentDTO[i].studentclass}</td>
<td>
<button class ="btn btn-info btnEdit" data-id="${studentDTO[i].id}">Edit</button>
<button class ="btn btn-info btnSave hidden" data-id="${studentDTO[i].id}">Save</button>
<button class ="btn btn-danger btnDelete" data-id="${studentDTO[i].id}">Delete</button>
</td>
</tr>`;
}
$('#tblStudentList tbody').html(htmlString);
}
$(document).on('click', '.btnDelete', function () {
studentDTO = studentDTO.filter(x => x.id != $(this).attr('data-id'));
displayStudent();
});
$(document).on('click', '.btnEdit', function () {
var currentData = studentDTO.filter(x => x.id == $(this).attr('data-id'))[0];
if (currentData != undefined) {
var parentRow = $(this).parents('tr');
$(parentRow).find('.student-name').html(`<input type="text" id="name" class="col-md-6" value="${currentData.name}" />`);
$(parentRow).find('.student-address').html(`<input type="text" id="address" class="col-md-6" value="${currentData.address}" />`);
$(parentRow).find('.student-hobbies').html(`<input type="text" id="hobbies" class="col-md-6" value="${currentData.hobbies}" />`);
$(parentRow).find('.student-gender').html(`<input type="text" id="gender" class="col-md-6" value="${currentData.gender}" />`);
$(parentRow).find('.student-class').html(`<input type="text" id="class" class="col-md-6" value="${currentData.studentclass}" />`);
$(this).addClass('hidden');
$(this).parent().find('.btnSave').removeClass('hidden');
}
});
$(document).on('click', '.btnSave', function () {
var currentData = studentDTO.filter(x => x.id == $(this).attr('data-id'))[0];
var id = $(this).attr('data-id');
studentDTO = $.grep(studentDTO, function (data, index) {
return data.id != id
});
studentDTO.push({
id: currentData.id,
name: $('#name').val(),
address: $('#address').val(),
hobbies: $('#hobbies').val(),
gender: $('#gender').val(),
studentclass: $('#class').val(),
})
displayStudent();
});
