Add Edit Delete Table Row Example using JQuery

Today, We want to share with you Add Edit Delete Table Row Example using JQuery.In this post we will show you add edit delete rows dynamically using jquery and php, hear for add and delete rows dynamically with textboxes using jquery we will give you demo and example for implement.In this post, we will learn about how to add, edit and delete rows of a html table with jquery with an example.

Add Edit Delete Table Row Example using JQuery

There are the Following The simple About Add Edit Delete Table Row Example using JQuery Full Information With Example and source code.

As I will cover this Post with live Working example to develop dynamically add remove rows in html table using jquery, so the how to edit data in html table using jquery for this example is following below.

Step 1: Include jquery Libs

simple Head section include CSS and jquery

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

Step 2: jquery Part

script for javascript and jquery

<script type="text/javascript">
   
    $("form").submit(function(e){
        e.preventDefault();
        var name = $("input[name='name']").val();
        var product_qty = $("input[name='product_qty']").val();
     
        $(".data-table tbody").append("<tr data-name='"+name+"' data-product_qty='"+product_qty+"'><td>"+name+"</td><td>"+product_qty+"</td><td><button class='btn btn-info btn-xs product-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
    
        $("input[name='name']").val('');
        $("input[name='product_qty']").val('');
    });
   
    $("body").on("click", ".btn-delete", function(){
        $(this).parents("tr").remove();
    });
    
    $("body").on("click", ".product-edit", function(){
        var name = $(this).parents("tr").attr('data-name');
        var product_qty = $(this).parents("tr").attr('data-product_qty');
    
        $(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_product_qty" value="'+product_qty+'">');
    
        $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs product-update'>Update</button><button class='btn btn-warning btn-xs product-cancel'>Cancel</button>")
        $(this).hide();
    });
   
    $("body").on("click", ".product-cancel", function(){
        var name = $(this).parents("tr").attr('data-name');
        var product_qty = $(this).parents("tr").attr('data-product_qty');
    
        $(this).parents("tr").find("td:eq(0)").text(name);
        $(this).parents("tr").find("td:eq(1)").text(product_qty);
   
        $(this).parents("tr").find(".product-edit").show();
        $(this).parents("tr").find(".product-update").remove();
        $(this).parents("tr").find(".product-cancel").remove();
    });
   
    $("body").on("click", ".product-update", function(){
        var name = $(this).parents("tr").find("input[name='edit_name']").val();
        var product_qty = $(this).parents("tr").find("input[name='edit_product_qty']").val();
    
        $(this).parents("tr").find("td:eq(0)").text(name);
        $(this).parents("tr").find("td:eq(1)").text(product_qty);
     
        $(this).parents("tr").attr('data-name', name);
        $(this).parents("tr").attr('data-product_qty', product_qty);
    
        $(this).parents("tr").find(".product-edit").show();
        $(this).parents("tr").find(".product-cancel").remove();
        $(this).parents("tr").find(".product-update").remove();
    });
    
</script>

HTML

Main Body Part

<body>
    
<div class="container">
  <h1>Add Edit Delete Table Row Example using JQuery - pakainfo.com</h1>
    
  <form>
        
    <div class="form-group">
      <label>Name:</label>
      <input type="text" name="name" class="form-control" value="Jaydeep Gondaliya" required="">
    </div>
    
    <div class="form-group">
      <label>Product Qty:</label>
      <input type="text" name="product_qty" class="form-control" value="1250" 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>Product Qty</th>
      <th width="200px">Action</th>
    </thead>
    <tbody>
    
    </tbody>
  </table>
   
</div>

Full Example :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Add Edit Delete Table Row Example using JQuery - 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">
  <h1>Add Edit Delete Table Row Example using JQuery - pakainfo.com</h1>
    
  <form>
        
    <div class="form-group">
      <label>Name:</label>
      <input type="text" name="name" class="form-control" value="Jaydeep Gondaliya" required="">
    </div>
    
    <div class="form-group">
      <label>Product Qty:</label>
      <input type="text" name="product_qty" class="form-control" value="1250" 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>Product Qty</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 product_qty = $("input[name='product_qty']").val();
     
        $(".data-table tbody").append("<tr data-name='"+name+"' data-product_qty='"+product_qty+"'><td>"+name+"</td><td>"+product_qty+"</td><td><button class='btn btn-info btn-xs product-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
    
        $("input[name='name']").val('');
        $("input[name='product_qty']").val('');
    });
   
    $("body").on("click", ".btn-delete", function(){
        $(this).parents("tr").remove();
    });
    
    $("body").on("click", ".product-edit", function(){
        var name = $(this).parents("tr").attr('data-name');
        var product_qty = $(this).parents("tr").attr('data-product_qty');
    
        $(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_product_qty" value="'+product_qty+'">');
    
        $(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs product-update'>Update</button><button class='btn btn-warning btn-xs product-cancel'>Cancel</button>")
        $(this).hide();
    });
   
    $("body").on("click", ".product-cancel", function(){
        var name = $(this).parents("tr").attr('data-name');
        var product_qty = $(this).parents("tr").attr('data-product_qty');
    
        $(this).parents("tr").find("td:eq(0)").text(name);
        $(this).parents("tr").find("td:eq(1)").text(product_qty);
   
        $(this).parents("tr").find(".product-edit").show();
        $(this).parents("tr").find(".product-update").remove();
        $(this).parents("tr").find(".product-cancel").remove();
    });
   
    $("body").on("click", ".product-update", function(){
        var name = $(this).parents("tr").find("input[name='edit_name']").val();
        var product_qty = $(this).parents("tr").find("input[name='edit_product_qty']").val();
    
        $(this).parents("tr").find("td:eq(0)").text(name);
        $(this).parents("tr").find("td:eq(1)").text(product_qty);
     
        $(this).parents("tr").attr('data-name', name);
        $(this).parents("tr").attr('data-product_qty', product_qty);
    
        $(this).parents("tr").find(".product-edit").show();
        $(this).parents("tr").find(".product-cancel").remove();
        $(this).parents("tr").find(".product-update").remove();
    });
    
</script>
     
</body>
</html>

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  ANGULAR 2 TUTORIAL FOR BEGINNERS STEP BY STEP

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Add Edit Delete Table Row Example using JQuery.
I would like to have feedback on my Pakainfo.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.