In this JQuery example, we will learn how to append table row with add edit and delete (CRUD) function using Jquery. In this example, we will make a simple CRUD operation using to Jquery plugin. If you are new to the Jquery then this example for you. So I will create a simple example of CRUD operation using JQuery and we will learn how to work this example.
So first thing in this example we need to create good looks for the page. So here we will use bootstrap and make a simple HTML file and include Jquery. Then after we will create an example of JQuery - Add Edit & Delete HTML Table Row
So let's do this example.
Example : index.html
<!DOCTYPE html> <html> <head> <title>Add Edit Delete Table Row Example using JQuery - webappfix.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <style type="text/css"> body { background: #e1e1e1; } </style> </head> <body> <div class="container"> <h1>Add Edit Delete Table Row Example using JQuery - webappfix.com</h1> <form> <div class="form-group"> <label>Name:</label> <input type="text" name="name" class="form-control" value="Dharmesh Chauhan" required=""> </div> <div class="form-group"> <label>Email:</label> <input type="text" name="email" class="form-control" value="contact@webappfix.com" required=""> </div> <button type="submit" class="btn btn-success save-btn">Save</button> </form> <br/> <table class="table table-bordered data-table table-condensed" style="background: #fff;"> <thead> <th>Name</th> <th>Email</th> <th width="200px">Action</th> </thead> <tbody> </tbody> </table> </div> <script type="text/javascript"> $("form").submit(function(e) { e.preventDefault(); var name = $("input[name='name']").val(); var email = $("input[name='email']").val(); $(".data-table tbody").append("<tr data-name='" + name + "' data-email='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>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('data-name'); var email = $(this).parents("tr").attr('data-email'); $(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="' + name + '">'); $(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="' + email + '">'); $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>") $(this).hide(); }); $("body").on("click", ".btn-cancel", function() { var name = $(this).parents("tr").attr('data-name'); var email = $(this).parents("tr").attr('data-email'); $(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('data-name', name); $(this).parents("tr").attr('data-email', email); $(this).parents("tr").find(".btn-edit").show(); $(this).parents("tr").find(".btn-cancel").remove(); $(this).parents("tr").find(".btn-update").remove(); }); </script> </body> </html>
How to get Current Date and Time in AngularJS?
I hope it can helpful for you.
Thanks...
We always thanks to you for reading our blogs.
Dharmesh Chauhan
(Swapinfoway Founder)Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us
Haresh Chauhan
(Co-Founder)We Are Also Recommending You :
- PHP Laravel JQuery Form Validation Example
- Get Zipcode/Pincode From Latitude and Longitude Javascript and Google Maps API
- Vuejs form input binding with select box option
- MultiSelect Vue Js Npm Example
- JQuery - Add Edit & Delete HTML Table Row Example
- How to install vue js project ?
- Skeleton Screen Loading Effect
- Laravel 6 installation with Angular
- How to call event in Select2 Example
- jQuery Lazy Load