Skip to content

All topics  /  jQuery

JQuery - Add Edit Delete Table Row Example

jQuery

When “JQuery - Add Edit Delete Table Row Example” moves through design, development and browser testing, this project guide can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Mar 25, 2021

Hi Guys,

Now let's see example of how to add edit and delete rows of a html table with javascript or jquery. We will talk about add edit delete table row example using jquery. I will create very simple example of add new table row using jquery, edit html table row using jquery and remove table row on button click.

This example will help to create start way to insert update delete operation using jquery. If you are beginner for jquery and you want to create some awesome example like add, edit and delete function with jquery.

We will use bootstrap for design so it look's very nice. we will simply create one html file and include bootstrap and jquery file. after that we write code of jquery to create new table row, edit row data and delete row data using jquery.

Here I will give you full example for how to add edit and delete rows of a html table with jquery. So let's see the bellow example:

Example :


<!DOCTYPE html>
<html>
<head>
    <title>JQuery - Add Edit Delete Table Row Example - NiceSnippets.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>
</head>
<body>
    <div class="container">
        <h1>JQuery - Add Edit Delete Table Row Example - NiceSnippets.com</h1>
        <form>
            <div class="form-group">
                <label>Name:</label>
                <input type="text" name="name" class="form-control" value="Paresh" required="">
            </div>

        
            <div class="form-group">
                <label>Email:</label>
                <input type="text" name="email" class="form-control" value="[email protected]" required="">
            </div>

       
            <button type="submit" class="btn btn-success save-btn">Save</button>
        </form>
        <br/>
        <table class="table table-bordered data-table">
            <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>

It will help you....

More on this topic