how to add edit and delete rows of a html table with jquery ?

how to add edit and delete rows of a html table with jquery – Steps By Steps to Add Dynamic Row into HTML table Using jQuery. i will show you how to add, edit, delete,update data in table using JQuery.

how to add edit and delete rows of a html table with jquery

An HTML table is created with Member Name, Member email, father’s name, section, mark fields. we will simply create one html file and include bootstrap and jquery file.

Add Edit Delete Table Row Example using JQuery

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Add Edit Delete Table Row Example using JQuery - www.pakainfo.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">
  <h2>Add Edit Delete Table Row Example using JQuery - www.pakainfo.com</h2>
    
  <form>
        
    <div class="form-group">
      <label>Member Name:</label>
      <input type="text" name="name" class="form-control" value="amit" required="">
    </div>
    
    <div class="form-group">
      <label>Member Email:</label>
      <input type="text" name="email" class="form-control" value="[email protected]_name.com" 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", ".action-delete", function(){
        $(this).parents("tr").remove();
    });
    
    $("body").on("click", ".action-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", ".action-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(".action-edit").show();
        $(this).parents("tr").find(".action-update").remove();
        $(this).parents("tr").find(".action-cancel").remove();
    });
   
    $("body").on("click", ".action-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(".action-edit").show();
        $(this).parents("tr").find(".action-cancel").remove();
        $(this).parents("tr").find(".action-update").remove();
    });
    
</script>
     
</body>
</html>

Don’t Miss : Add Edit Delete Table Row Example using JQuery

Also Read This ๐Ÿ‘‰   how to display data from database in php in table?

I hope you get an idea about how to add, edit and delete rows of a html table with jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.