JQuery - Add Edit & Delete HTML Table Row Example

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...

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)