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
Add a New Row in a Table Using jQuery
In this article, we will learn to add a new row to a table using jQuery. jQuery, a fast and lightweight JavaScript library, in web development, dynamically adding or removing rows from a table is a common requirement, especially when dealing with forms or data entry interfaces.
Use Cases
This functionality is particularly useful in scenarios such as ?- Creating dynamic forms where users can add multiple entries (e.g., adding multiple email addresses, phone numbers, or product details).
- Building data entry interfaces where the number of rows is not fixed.
- Implementing editable tables with add/remove capabilities.
Adding a New Row Using jQuery
The approach involves cloning the first row of the table, clearing its input values, and appending it to the table.
Following are the steps for jQuery Script for adding a new row ?
- When the newbtn button is clicked, the first row of the table is cloned using the clone() method.
- The find("input") method is used to locate all input fields within the cloned row.
- The val('') method clears the input values, and the attr() method updates the id and name attributes to ensure they are unique for each new row.
- The new row is appended to the table using appendTo("table").
- A counter (x) is incremented to ensure unique IDs and names for subsequent rows.
Below is the jQuery script for adding a new row ?
$(document).ready(function(){
var x = 1;
$("#newbtn").click(function () {
$("table tr:first").clone().find("input").each(function () {
$(this).val('').attr({
'id': function (_, id) {
return id + x
},
'name': function (_, name) {
return name + x
},
'value': ''
});
}).end().appendTo("table");
x++;
});
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
});
Use event delegations to include both add a new and delete a table row on a web page using jQuery.
Firstly, set a button in HTML to add a new row ?
<button id="newbtn"> Add new Row </button>
Now under the button click event, set the code ?
$("#newbtn").click(function () {
}
Example
Below is an example of adding a new row in a table using jQuery ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = 1;
$("#newbtn").click(function () {
$("table tr:first").clone().find("input").each(function () {
$(this).val('').attr({
'id': function (_, id) {
return id + x
},
'name': function (_, name) {
return name + x
},
'value': ''
});
}).end().appendTo("table");
x++;
});
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<button type="button" class="deletebtn" title="Remove row">X</button>
</td>
<td>
<input type="text" id="txtTitle" name="txtTitle">
</td>
<td>
<input type="text" id="txtLink" name="txtLink">
</td>
</tr>
</table>
<button id="newbtn">Add new Row</button>
</body>
</html>
Output
To add a new row enter the data and click the "Add new row" button ?
Conclusion
Using jQuery to dynamically add and remove rows in a table is a powerful and efficient way to enhance user interaction on your web pages. The provided code is simple, reusable, and can be easily customized to fit specific requirements. Whether you're building a form, a data entry interface, or any other dynamic table-based feature, this approach will save you time and effort.
2K+ Views
