Add Edit Delete Table Row Example using JQuery
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
<!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 class="container">
<h1>Add Edit Delete Table Row Example using JQuery - ItSolutionStuff.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="paresh@gmail.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", ".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...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- How to set multiple selected value in Chosen Jquery Plugin?
- Jquery - draggable sortable table rows example demo with bootstrap
- HTML tags are not allowed in textbox validation using Jquery
- PHP - File upload progress bar with percentage using form jquery example
- JQuery - Delete confirm modal using bootbox example
- How to check image loaded or not in JQuery?