by DuttaluruVijayakumar Updated : Dec 01, 2019 in Articles

How to do crud operation in javascript and jquery

In this javascript articles, we will learn How to do crud operation in javascript and jquery this basic example for understanding the javascript and jquery

implementing the javascript curd operation

Create an HTML page in your project name like “javascriptcurdoperation.html”

javascriptcurdoperation.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<style>
    .hidden {
        display: none;
    }

    .result {
        max-width: 80px;
    }
</style>
<br />
<div class="container">
    <div class="row">
        <div class="col-md-10">
            <button class="btn btn-sm btn-primary" id="add-test">Add Course</button>
            <div class="clearfix"><br /></div>
            <div class="card card-body">
                <!-- Form Wrapper &amp; Button -->
                <div class="form-wrapper hidden" style="width: 61%;">
                    <select class="form-control" id="test-name" style="margin: 10px;">
                        <option selected>select course</option>
                        <option>Java</option>
                        <option>Paython</option>
                        <option>Php</option>
                    </select>
                    <input class="form-control" placeholder=" Enter no of articels" type="number" id="test-result" style="margin: 10px;">
                    <button class="btn btn-sm btn-info" id="create-test" style="margin: 10px;">Add</button>
                </div>
                <!-- Data Table -->
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Courses</th>
                            <th scope="col">Articels</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tests-table"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

the given below script helpful for loading dummy data in the dropdown, debug,hide and assign default values to some elements

<script>

    var newId = 4
    var newTest = { 'name': null, 'id': newId, 'Articels': null }

    $('#add-test').on('click', function () {
        $('.form-wrapper').removeClass('hidden')
    })

    $('#test-result').on('keyup', function () {
        newTest.Articels = $(this).val()
        console.log(newTest)

    })

    $('#test-name').on('change', function () {
        newTest.name = $(this).val()
        console.log(newTest)
    })

    $('#create-test').on('click', function () {
        if (newTest.name == null) {
            alert('No test selected!')
        } else {
            addRow(newTest)
            $('#test-name').val('')
            $('#test-result').val('')
            $('.form-wrapper').addClass('hidden')
        }
    })
    //drop dowan data
    var tests = [
        { 'name': 'Javascript', 'id': '1', 'Articels': "43" },
        { 'name': 'HTML', 'id': '2', 'Articels': "1" },
        { 'name': 'CSS', 'id': '3', 'Articels': "24" },
    ]
    for (var i in tests) {
        addRow(tests[i])
    }
    </script>

addRow() function we will add table rows dynamically see the given function

  function addRow(obj) {
        var row = `<tr scope="row" class="test-row-${obj.id}">
                       <td>${obj.name}</td>
                       <td id="result-${obj.id}" data-testid="${obj.id}"">${obj.Articels}</td>
                       <td>
                         <button class="btn btn-sm btn-danger" data-testid=${obj.id} id="delete-${obj.id}">Delete</button>
                         <button class="btn btn-sm btn-info" disabled data-testid="${obj.id}"  id="save-${obj.id}">Save</button>

                         <button class="btn btn-sm btn-danger hidden" data-testid="${obj.id}"  id="cancel-${obj.id}">Cancel</button>
                         <button class="btn btn-sm btn-primary hidden" data-testid="${obj.id}"  id="confirm-${obj.id}">Confirm</button>

                       </td>
                   </tr>`
        $('#tests-table').append(row)

        $(`#delete-${obj.id}`).on('click', deleteTest)
        $(`#cancel-${obj.id}`).on('click', cancelDeletion)
        $(`#confirm-${obj.id}`).on('click', confirmDeletion)
        $(`#save-${obj.id}`).on('click', saveUpdate)
        $(`#result-${obj.id}`).on('click', editResult)
    }

editResult() function we will edit table rows dynamically see the given function

function editResult() {
        var testid = $(this).data('testid')
        var value = $(this).html()

        $(this).unbind()
        $(this).html(`<input class="result form-control" data-testid="${testid}" type="text" value="${value}">`)

        $(`.result`).on('keyup', function () {
            var testid = $(this).data('testid')
            var saveBtn = $(`#save-${testid}`)
            saveBtn.prop('disabled', false)
        })
    }

saveUpdate() function we will save the new rows in a table dynamically see the given function

 function saveUpdate() {
        console.log('Saved!')
        var testid = $(this).data('testid')
        var saveBtn = $(`#save-${testid}`)
        var row = $(`.test-row-${testid}`)
        saveBtn.prop('disabled', true)
        row.css('opacity', "0.5")
        setTimeout(function () {
            row.css('opacity', '1')
        }, 2000)
    }

deleteTest() function we will delete the row from a table see the given function

 function deleteTest() {
        var testid = $(this).data('testid')
        var deleteBtn = $(`#delete-${testid}`)
        var saveBtn = $(`#save-${testid}`)
        var cancelBtn = $(`#cancel-${testid}`)
        var confirmBtn = $(`#confirm-${testid}`)
        deleteBtn.addClass('hidden')
        saveBtn.addClass('hidden')
        cancelBtn.removeClass('hidden')
        confirmBtn.removeClass('hidden')
    }

cancelDeletion() function we will revert your delete action on the row from a table see the given function

  function cancelDeletion() {
        var testid = $(this).data('testid')
        var deleteBtn = $(`#delete-${testid}`)
        var saveBtn = $(`#save-${testid}`)
        var cancelBtn = $(`#cancel-${testid}`)
        var confirmBtn = $(`#confirm-${testid}`)
        deleteBtn.removeClass('hidden')
        saveBtn.removeClass('hidden')
        cancelBtn.addClass('hidden')
        confirmBtn.addClass('hidden')
    }

confirmDeletion() function we will delete the row from your table see the given function

 function confirmDeletion() {
        var testid = $(this).data('testid')
        var row = $(`.test-row-${testid}`)
        row.remove()
    }

OutPut:

*How to do crud operation in javascript and jquery*

javascript, jquery Examples Demos

View Demo Examples on javascript

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

by DuttaluruVijayakumar Updated : Dec 01, 2019 in Articles

How to do crud operation in javascript and jquery

Related Posts: