Add Remove rows in table dynamically using jquery
To add or remove table rows using Jquery dynamically, here is a simple example code. Here first we will have a table with id say tbl1. Along with that we will have two buttons for Adding and Removing table rows.
To distinguish row elements, which is text boxes here, we will have a variable say cnt, and initialize it to 2.
On click of Add button we will do two things a) increment cnt variable by 1 and append it to name of text box, so that we can read data from individual textboxes b) we will find last tr of table and append a row after that, as shown in following code:
Then on click of Remove button, we will find last tr of table by JQuery’s tr:last-child property, then using remove() function we will remove it as shown:
Complete code and Demo:
CLICK HERE FOR DEMO
–Add Remove rows in table dynamically using jquery–