In this blog, we will learn to create a simple Inline editing operation with the help of jQuery/JavaScript.
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();
});
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular