ItSolutionStuff.com

Add Edit Delete Table Row Example using JQuery

By Hardik Savani • July 4, 2023
Javascript Bootstrap HTML 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

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

JQuery Rotate Image Animation Example Code

Read Now →

How to Remove Duplicate Object from Array in JQuery?

Read Now →

JQuery QR Code Scanner using Instascan JS Example

Read Now →

PHP CRUD Operation Using Ajax and JQuery Example

Read Now →

JQuery Animated Typing Effect using Typed JS Example

Read Now →

How to Remove Comma from String in JQuery?

Read Now →

JQuery Add Remove Input Fields Dynamically Example

Read Now →

How to Disable Right Click Menu using JQuery?

Read Now →

JQuery Chosen Multi Select Dropdown Example

Read Now →

JQuery Draggable Sortable Table Rows Example

Read Now →

HTML Tags are not Allowed in Textbox Validation using JQuery

Read Now →

File Upload with Progress Bar using jQuery Ajax and PHP Example

Read Now →

JQuery Delete Confirm Modal using Bootbox Example

Read Now →

How to Check Image Loaded or Not in JQuery?

Read Now →