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
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
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
Latest posts by DuttaluruVijayakumar (see all)
- What is CTS (Common Type System) in .Net - October 16, 2020
- What is main method in c# - October 13, 2020
- What is var data type in C# - October 5, 2020