How to Add, Edit, and Delete Table Rows Using jQuery - A Beginner's Guide
In this post, i want to share with ou how to add edit and delete rows of a html table with javascript or jquery.
In this post, I’ll show you how to dynamically add, edit, and delete rows in an HTML table using jQuery. This is a great example for beginners who want to learn how to manipulate table data with jQuery. By the end of this tutorial, you’ll be able to create a table where users can add new rows, edit existing ones, and delete rows with just a few clicks.
To make things look clean and professional, we’ll use Bootstrap for styling. The example is simple and easy to follow, making it a great starting point for anyone new to jQuery.
Let’s dive into the code and see how it works!
Example: Add, Edit, and Delete Table Rows with jQuery
Here’s the complete code to create a table with add, edit, and delete functionality:
<!DOCTYPE html>
<html>
<head>
<title>Add, Edit, and Delete Table Rows with jQuery</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, and Delete Table Rows with jQuery</h1>
<form>
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" placeholder="Enter name" required>
</div>
<div class="form-group">
<label>Email:</label>
<input type="text" name="email" class="form-control" placeholder="Enter email" required>
</div>
<button type="submit" class="btn btn-success save-btn">Add Row</button>
</form>
<br/>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th width="200px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript">
// Add new row to the table
$("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('');
});
// Delete a row
$("body").on("click", ".btn-delete", function(){
$(this).parents("tr").remove();
});
// Edit a row
$("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();
});
// Cancel edit and revert changes
$("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();
});
// Update row with new data
$("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>How It Works:
- Add a New Row:
- Enter a name and email in the form fields and click "Add Row."
- A new row will be added to the table with "Edit" and "Delete" buttons.
- Edit a Row:
- Click the "Edit" button to make the row editable.
- Update the name and email, then click "Update" to save changes or "Cancel" to discard them.
- Delete a Row:
- Click the "Delete" button to remove the row from the table.
This example is perfect for beginners who want to learn how to manipulate HTML tables using jQuery. Feel free to try it out and customize it to fit your needs!