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:

javascript, jquery Examples Demos

View Demo Examples on javascript