How to Dynamically Add/Remove Table Rows using jQuery?
Last Updated :
10 Sep, 2024
We will dynamically add/remove rows from an HTML table using jQuery. jQuery provides us with a lot of methods to perform various tasks. To dynamically add and remove the rows from an HTML table, we are also going to use some of these jQuery methods like append(), remove(), etc.
Adding a row
To add a row, we will use the append() method. The append() method takes the HTML as a parameter in the form of a string and appends it to the selected element as its child. We will attach a click event to the button and use the append method to append the HTML and create a new row once the user clicks the button.
Removing a row
The remove() method of jQuery will be used to remove the selected element. You just need to select the element to be removed using the jQuery selector's syntax and use the remove method on the element that you want to remove. Here again, a remove button will be generated dynamically with the addition of the new row which removes the corresponding row once user clicks the button.
Example: The below example will show the practical implementation of Adding and Deleting rows dynamically from an HTML table using jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS CDN -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
</head>
<body>
<div class="container pt-4">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">
Row Number
</th>
<th class="text-center">
Remove Row
</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<button class="btn btn-md btn-primary"
id="addBtn" type="button">
Add New Row
</button>
</div>
<!-- Bootstrap JS CDN -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
</script>
<!-- jQuery CDN -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script>
$(document).ready(() => {
let count=1;
// Adding row on click to Add New Row button
$('#addBtn').click(function () {
let dynamicRowHTML = `
<tr class="rowClass"">
<td class="row-index text-center">
Dynamically added Row ${count}
</td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove
</button>
</td>
</tr>`;
$('#tbody').append(dynamicRowHTML);
count++;
});
// Removing Row on click to Remove button
$('#tbody').on('click', '.remove', function () {
$(this).parent('td.text-center').parent('tr.rowClass').remove();
});
})
</script>
</body>
</html>
Output:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
How to remove table row from table using jQuery ? Removing a table row using jQuery involves selecting a specific row within an HTML table and deleting it dynamically. This can be done through various methods like .remove() or .detach(), allowing developers to manipulate the table structure efficiently without reloading the page.Here we have some c
3 min read
How to create Dynamic Drag and Drop table rows using jQuery Ajax? In this article, we will discuss the method of How to create Dynamic and Drop table rows using JQuery Ajax. We will use jQuery and HTML CSS to perform the operations of Drag and Drop on the table row.First to perform the operations of the Drag and Drop table row we need two jQuery libraries without
4 min read
How to highlight alternate table row using jQuery ? In this article, we will set the highlight on an alternative table row using jQuery. The :nth-child(2n) selector is used to select the alternative row and the addClass() method is used to set the style of the alternative rows. Syntax: $(tr:nth-child(2n)").addClass("GFG"); Here, we will create a simp
2 min read
How to add table row in a table using jQuery? In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.Steps to add table
2 min read
How to Delete All Table Rows Except First One using jQuery? To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.ApproachFirst, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. Th
1 min read
How to Count Number of Rows and Columns in a Table Using jQuery? Given an HTML document containing a table, the task is to count the number of rows and columns in that table using JQuery. There are a few methods available in jQuery to count the number of rows and columns in an HTML table. Table of Content By iterating through the rows and columnsBy using the leng
3 min read