Add Edit Delete Table Row Example using JQuery

Add Edit Delete Table Row Example using JQuery

In this post we will give you information about Add Edit Delete Table Row Example using JQuery. Hear we will give you detail about Add Edit Delete Table Row Example using JQueryAnd how to use it also give you demo for it if it is necessary.

In this post, i want to share with ou how to add edit and delete rows of a html table with javascript or 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.

If you are beginner for jquery and you want to create some awesome example like add, edit and delete function with jquery. then this example will help to create start way to insert update delete operation using 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.

So, let’s see bellow example and demo for testing.

Example

Also see:Simple Add remove input fields dynamically using jquery with Bootstrap
<!DOCTYPE html>

<html>

<head>

  <title>Add Edit Delete Table Row Example using JQuery - ItSolutionStuff.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 >

  <h1>Add Edit Delete Table Row Example using JQuery - ItSolutionStuff.com</h1>



  <form>



    <div >

      <label>Name:</label>

      <input type="text" name="name"  value="Paresh" required="">

    </div>



    <div >

      <label>Email:</label>

      <input type="text" name="email"  value="paresh@gmail.com" required="">

    </div>



    <button type="submit" >Save</button>



  </form>

  <br/>

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


You can also see demo and i hope it can help you…

Hope this code and post will helped you for implement Add Edit Delete Table Row Example using JQuery. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  55  =  62

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US