Add and Remove Table Rows Dynamically Using jQuery

In this tutorial, learn how to add/remove table rows dynamically using jQuery. Add table rows on button click and remove the added rows after addition. Enter your data in the input box for each row and add-on button click.

After you add the rows, you can remove only those rows which you want to remove from the table. Add and delete rows dynamically and input your data for each row with jQuery.

How to Add Table Rows Dynamically Using jQuery

If you want to add rows dynamically, you can perform this task using jQuery. You can use input boxes and the required table heading for the first row.

The input boxes are helpful to insert the table rows with its values. You have to use the jQuery append() to append the new rows to the table with values on button click.

Output





Team NameCrickert NameScore

The above example contains the input boxes for each cell of a new row of the table. Enter your required values in the input boxes given above and click the ‘Add New Row‘ button. The new row gets added after the button click.

However, the above example contains no functionality to remove rows after addition. To remove rows of a table after addition, read further.

Remove Table Rows Dynamically Using jQuery

To remove the table rows, you have to use the jQuery remove(). Each row of a table contains the delete button on click.

You can choose your required row you want to delete from the table.

Output

Team NameCrickert NameScoreDelete
West IndiesChris Gayle195
IndiaVirat Kohli124
AustraliaDavid Warner167
South AfricaAB De Villier’s185

The above example contains the table with 4 rows. Click the delete button of the row which you want to remove from the table.

You can delete rows dynamically with the method given above. However, if you want to perform both addition and deletion in the same table, read further.

Dynamically Adding and Deleting Rows Using jQuery

You can perform both add and remove table rows dynamically with jQuery. To add and remove rows in the same table, you have to add a delete button on the addition of the rows.

The logic is same, you have to use the input boxes to get the entries of data for each row. Also, you have to add a button with each input of rows using jQuery.

Output





Team NameCrickert NameScoreDelete

The above example contains the input boxes to get data from users for each row. Add a new row by putting the value in the input boxes and click the add button. The delete button also gets added to each entry.

Now, if you want to delete rows of a table dynamically. Click the delete button for the row you want to delete from the table.

You may also like to read

Hope, you like this tutorial of how to add/remove table rows dynamically using jQuery. If you have any query regarding the tutorial, please comment below.

References

Also tell me, which method are you using to add and remove the table rows with jQuery.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.