Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Add Edit and Delete Table Row in jQuery?
In modern web development, effective table management is essential for data-heavy applications. The ability to dynamically add, edit, and delete table rows significantly enhances user experience and interactivity. jQuery provides powerful methods to accomplish these operations efficiently.
Table Row Overview
A table row in HTML is represented by the <tr> element, which groups related data cells (<td> elements) together. Each <tr> element defines a single row containing one or more data cells.
Syntax
Following are the main jQuery methods used for table row manipulation
$(selector).append(content)
The append() method adds content to the end of selected elements. The content can be HTML strings, DOM elements, or jQuery objects.
$(selector).find(selectCondition)
The find() method searches for descendant elements that match the specified condition and returns them in a new jQuery object.
$(selector).remove()
The remove() method removes selected elements and their child elements from the DOM.
Implementation Approach
To perform table row operations, we combine jQuery methods with DOM manipulation techniques
Adding rows Create a new
<tr>element with<td>cells and useappend()to insert it into the table.Editing rows Use
find()to select specific<td>elements within a row, then modify their content usingtext()orhtml().Deleting rows Apply the
remove()method to the target row element.
Complete Example
Following example demonstrates adding, editing, and deleting table rows using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Add Edit Delete Table Rows with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; width: 100%; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #f2f2f2; font-weight: bold; }
tr:hover { background-color: #f5f5f5; }
button { margin: 5px; padding: 10px 15px; cursor: pointer; }
#add-btn { background-color: #4CAF50; color: white; border: none; }
#remove-btn { background-color: #f44336; color: white; border: none; }
#edit-btn { background-color: #008CBA; color: white; border: none; }
</style>
</head>
<body>
<h2>jQuery Table Row Management</h2>
<table id="data-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Development</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>Marketing</td>
</tr>
</tbody>
</table>
<button id="add-btn">Add Row</button>
<button id="remove-btn">Remove Last Row</button>
<button id="edit-btn">Edit Random Row</button>
<script>
$(document).ready(function(){
// Add new row
$("#add-btn").click(function(){
var newRow = "<tr>" +
"<td>New Employee</td>" +
"<td>new@example.com</td>" +
"<td>Sales</td>" +
"</tr>";
$("#data-table tbody").append(newRow);
});
// Remove last row
$("#remove-btn").click(function(){
$("#data-table tbody tr:last").remove();
});
// Edit random row
$("#edit-btn").click(function(){
let rows = $("#data-table tbody").find("tr");
if(rows.length > 0) {
let randomIndex = Math.floor(Math.random() * rows.length);
rows.eq(randomIndex).find("td").eq(0).text("Updated Name");
rows.eq(randomIndex).find("td").eq(1).text("updated@example.com");
}
});
});
</script>
</body>
</html>
The output displays an interactive table with buttons to manipulate rows
jQuery Table Row Management Name | Email | Department John Doe | john@example.com | Development Jane Smith | jane@example.com | Marketing [Add Row] [Remove Last Row] [Edit Random Row] (Clicking "Add Row" adds: New Employee | new@example.com | Sales) (Clicking "Remove Last Row" removes the bottom row) (Clicking "Edit Random Row" updates a random row's name and email)
Advanced Example with User Input
Following example allows users to input data when adding new rows
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table Row Management</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; width: 100%; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 10px; }
th { background-color: #f2f2f2; }
input { padding: 5px; margin: 3px; width: 150px; }
button { margin: 5px; padding: 8px 12px; cursor: pointer; }
.delete-btn { background-color: #ff4444; color: white; border: none; font-size: 12px; }
</style>
</head>
<body>
<h2>Employee Management System</h2>
<div>
<input type="text" id="name-input" placeholder="Enter Name">
<input type="email" id="email-input" placeholder="Enter Email">
<input type="text" id="dept-input" placeholder="Enter Department">
<button id="add-employee">Add Employee</button>
</div>
<table id="employee-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Johnson</td>
<td>alice@company.com</td>
<td>HR</td>
<td><button class="delete-btn">Delete</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
// Add new employee
$("#add-employee").click(function(){
var name = $("#name-input").val();
var email = $("#email-input").val();
var dept = $("#dept-input").val();
if(name && email && dept) {
var newRow = "<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + dept + "</td>" +
"<td><button class='delete-btn'>Delete</button></td>" +
"</tr>";
$("#employee-table tbody").append(newRow);
// Clear inputs
$("#name-input, #email-input, #dept-input").val("");
} else {
alert("Please fill all fields!");
}
});
// Delete specific row (event delegation)
$("#employee-table").on("click", ".delete-btn", function(){
$(this).closest("tr").remove();
});
});
</script>
</body>
</html>
This example provides input fields for adding new employees and individual delete buttons for each row. The system validates input before adding rows and uses event delegation for dynamically added delete buttons.
Employee Management System [Name Input] [Email Input] [Department Input] [Add Employee] Name | Email | Department | Action Alice Johnson | alice@company.com | HR | [Delete] (Users can input data and add new rows with individual delete buttons)
Key jQuery Methods Summary
| Method | Purpose | Usage Example |
|---|---|---|
append() |
Add content to the end of elements | $("#table").append(newRow) |
remove() |
Remove elements from DOM | $("tr:last").remove() |
find() |
Search for descendant elements | $("tr").find("td") |
text() |
Get/set text content | $("td").text("New Value") |
closest() |
Find nearest ancestor element | $(this).closest("tr") |
Conclusion
jQuery provides powerful methods like append(), remove(), and find() for dynamic table row manipulation. These methods, combined with event handlers and DOM traversal techniques, enable developers to create interactive data management interfaces with minimal code. The key is using proper selectors and event delegation for dynamically added elements.
3K+ Views
