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(); });