Inline Crud Operation Using Query

In this blog, we will learn to create a simple Inline editing operation with the help of jQuery/JavaScript.


  • 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>

  <title>Inline Editing</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="" />
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>

  <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">
<script src="Index.js"></script>

Now, create an Index.js and place the following code in it.

var studentDTO = [];

$(document).on('click', '#btnSaveStudent', function () {


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 {

function addStudentData() {

    var name = $('#txtfirstname').val();
    var address = $('#txtaddress').val();
    var hobbies = $('#txthobbies').val();
    var gender = $('#txtgender').val();
    var studentclass = $('#txtclass').val();

        id: studentDTO.length + 1,
        name: name,
        address: address,
        hobbies: hobbies,
        gender: gender,
        studentclass: studentclass,

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>
                                <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>
    $('#tblStudentList tbody').html(htmlString);


$(document).on('click', '.btnDelete', function () {
    studentDTO = studentDTO.filter(x => != $(this).attr('data-id'));

$(document).on('click', '.btnEdit', function () {

    var currentData = studentDTO.filter(x => == $(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="${}" />`);
        $(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}" />`);


$(document).on('click', '.btnSave', function () {
    var currentData = studentDTO.filter(x => == $(this).attr('data-id'))[0];
    var id = $(this).attr('data-id');

    studentDTO = $.grep(studentDTO, function (data, index) {
        return != id

        name: $('#name').val(),
        address: $('#address').val(),
        hobbies: $('#hobbies').val(),
        gender: $('#gender').val(),
        studentclass: $('#class').val(),



Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories