Add remove more rows dynamically using Jquery in HTML table

Abhigyan Singh 10th Oct 2020

Before reading this tutorial, we need to have little knowledge of HTML and HTML tables. So let us assume that we have created a table and tutorial explains how to add more rows dynamically into the table using Jquery and remove that rows. This functionality is much needed in the user interface where we need to collect data from users or we are allowing users to input data where we are not restricting users to input certain limits of data.

Users can enter more data by just adding more rows by clicking the function. When the user clicks that function one row added below the current row. In this row, we can create any text input like Textbox, Textarea, Checkbox, radio button, dropdown, etc.

You can also read : (Submit form without refreshing page with Jquery and Ajax)

Importance of add more rows dynamically

Adding more rows with the same format or same input option like textbox, input box, etc is more important where we need to capture a similar format of data multiple times or multiple data need to store in a table same time. So using this tutorial, we can multiple data at the same time.

Main Features :  

  1. Adding more rows dynamically
  2. Remove the added rows any time

We want to remember that in this tutorial we are not inserting the table data into the database or we are not doing any PHP functionality in it. This tutorial just explains how to add remove more rows dynamically using Jquery in the HTML table.

Explanation:

Here, we have created a table and initially add one row in it. This row can contain any input like Textbox, Textarea, checkbox, radio button, dropdown, etc. Now there is a button called “Add more”. When the user clicks on that button a new row will add below that current row with the desired input format. This process will repeat to add several rows.

Code Explanation:

HTML Code:

<table style="background: #fff;" rules="all">
<tbody>
<tr>
<td style="font-size: 14px;">Name</td>
<td style="font-size: 14px;">Email</td>
<td style="font-size: 14px;">Mobile</td>
<td><span style="font: normal 12px agency, arial; color: blue; text-decoration: underline; cursor: pointer;">
Add More
</span></td>
</tr>
<tr id="rowId">
<td><input name="" size="17%" type="text" value="" /></td>
<td><input name="" type="text" value="" /></td>
<td><input name="" type="text" value="" /></td>
</tr>
</tbody>
</table>
<div id="addedRows"></div>

Jquery Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '</p>
<p id="rowCount'+rowCount+'"></p>
<td><input name="" type="text" size="17%" maxlength="120" /></td>

<td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td>

<td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td>

</tr>

<p> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>

<p>';
jQuery('#addedRows').append(recRow);
}

function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>

When users click that button, this onclick function called and append a row into that ID. Here we take #addedRows to append more rows and we are assigning a unique id to all rows. While deleting a row, we are passing that ID into the delete function and we just remove that ID’s row from the table.

After reading this tutorial, you can view the live demo from the above link and can able to download the complete working code from our repository. If you have any issues with this tutorial, please write to us in the comment section.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk