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 & 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
- how to create ASP.NET Core 3 Web API Project - January 21, 2022
- JWT Authentication using OAUTH - January 10, 2022
- Ado.net database Transactions - January 9, 2022