Inline Crud Operation Using Query

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



});

Submit a Comment

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

Subscribe

Select Categories