Mon - Sun 8.00 AM - 8.00 PM
[email protected]
Home
Articles
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Our Tutorials
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Vue JS
Android
Ui Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Login Form
Modals
OTP Verification Form
Popular Notes
HTML
CSS
JavaScript
SQL
Services
About
Contact Us
Ui Code
Snippets
Add Edit Delete operation using jQuery
HTML
CSS
JS
Output
HTML
<!DOCTYPE html> <html> <head> <title>Add Edit Delete operation using jQuery</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <h1 class="text-center text-primary">Add Edit Delete operation using jQuery</h1> <form> <div class="mb-3"> <label>Full Name</label> <input type="text" name="name" class="form-control" required> </div> <div class="mb-3"> <label>Email Address</label> <input type="text" name="email" class="form-control" required> </div> <button type="submit" class="btn btn-success save-btn">Save</button> </form> <br /> <table class="table table-bordered data-table"> <thead> <th>Full Name</th> <th>Email Address</th> <th width="250px">Action</th> </thead> <tbody> <!-- here code append using jquery dynamically --> </tbody> </table> </div> </div> </div> </body> </html>
CSS
JS
$("form").submit(function (e) { e.preventDefault(); var name = $("input[name='name']").val(); var email = $("input[name='email']").val(); $(".data-table tbody").append("<tr nameHere='" + name + "' emailHere='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button class='btn btn-info btn-edit ms-2 mt-2'>Edit</button><button class='btn btn-danger btn-delete ms-2 mt-2'>Delete</button></td></tr>"); $("input[name='name']").val(''); $("input[name='email']").val(''); }); $("body").on("click", ".btn-delete", function () { $(this).parents("tr").remove(); }); $("body").on("click", ".btn-edit", function () { var name = $(this).parents("tr").attr('nameHere'); var email = $(this).parents("tr").attr('emailHere'); $(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" class="form-control" value="' + name + '">'); $(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" class="form-control" value="' + email + '">'); $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-update ms-2 mt-2'>Update</button><button class='btn btn-warning btn-cancel ms-2 mt-2'>Cancel</button>") $(this).hide(); }); $("body").on("click", ".btn-cancel", function () { var name = $(this).parents("tr").attr('nameHere'); var email = $(this).parents("tr").attr('emailHere'); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-update").remove(); $(this).parents("tr").find(".btn-cancel").remove(); }); $("body").on("click", ".btn-update", function () { var name = $(this).parents("tr").find("input[name='edit_name']").val(); var email = $(this).parents("tr").find("input[name='edit_email']").val(); $(this).parents("tr").find("td:eq(0)").text(name); $(this).parents("tr").find("td:eq(1)").text(email); $(this).parents("tr").attr('nameHere', name); $(this).parents("tr").attr('emailHere', email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-cancel").remove(); $(this).parents("tr").find(".btn-update").remove(); });
Output