Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Dynamically Add/Remove Table Rows using jQuery?
In this article, we will learn how to dynamically add or remove table rows using jQuery, a popular JavaScript library, with the help of the click event listeners.
Tables are a commonly used element in web development, especially when dealing with tabular data or dynamic content. Adding or removing table rows dynamically can be a powerful feature that allows users to interact with the data in real time.
Let's understand how to implement this with the help of some examples.
Example 1
In this example, we will have an HTML table element with some row data in it. We will have a button to add a new row at the bottom of the table, and a "remove" button corresponding to each row to remove that particular row from the table.
Filename: index.html
<html lang="en">
<head>
<title>How to Dynamically Add/Remove Table Rows using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4caf50;
color: white;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
</tbody>
</table>
<button id="addRowBtn">Add Row</button>
<script>
$(document).ready(function () {
// Add row button click event
$("#addRowBtn").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody").append(newRow);
});
// Remove row button click event
$(document).on("click", ".removeBtn", function () {
$(this).closest("tr").remove();
});
});
</script>
</body>
</html>
Example 2
In this example, we will follow the above code structure and generate some random emails and names using 4 different methods, like appendTo, prepend, before and after.
Filename: index.html
<html lang="en">
<head>
<title>How to Dynamically Add/Remove Table Rows using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4caf50;
color: white;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
</tbody>
</table>
<button id="addRowBtnAppend">Add Row using appendto</button>
<button id="addRowBtnPrepend">Add Row using prepend</button>
<button id="addRowBtnBefore">Add Row using before</button>
<button id="addRowBtnAfter">Add Row using after</button>
<script>
$(document).ready(function () {
// Add row button click event using appendTo()
$("#addRowBtnAppend").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$(newRow).appendTo("#myTable tbody");
});
// Remove row button click event
$(document).on("click", ".removeBtn", function () {
$(this).closest("tr").remove();
});
// Example 2: Add row using prepend()
$("#addRowBtnPrepend").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody").prepend(newRow);
});
// Example 3: Add row before a specific row using before()
$("#addRowBtnBefore").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody tr:first").before(newRow);
});
// Example 4: Add row after a specific row using after()
$("#addRowBtnAfter").click(function () {
var newRow =
"<tr>" +
"<td>New Name</td>" +
"<td>New Email</td>" +
'<td><button class="removeBtn">Remove</button></td>' +
"</tr>";
$("#myTable tbody tr:last").after(newRow);
});
});
</script>
</body>
</html>
Conclusion
In this article, we learned how to dynamically add and remove table rows using jQuery. Whether we are building data-driven applications, content management systems, or any other web-based projects involving tables, the ability to add and remove rows dynamically offers a flexible and intuitive way to manage data. We explored how we can do that using the examples above.
4K+ Views
