How to add row in html table dynamically using JQuery

In this tutorial I shall teach you how to add row in html table dynamically using jquery. 

So let’s start step by step.

Create a blank html document

In the above screenshot you can see I have created a blank html document with some basic declarations like doctype, head and body tags.

Add table and button in html document

In the above screenshot you can see I have added a button and table with a single row and two table columns.

Now let’s render this in a web browser to see how this looks like.

You can see above that only the button is showing but the table is now visible in the web browser. That is because we didn’t apply any style to our table. 

Let’s apply some style to show table in the web browser.

Apply CSS to HTML table to make it visible in web browser

In the above screenshot you can see I have applied some basic style to our table to show in the web browser.

Render the web page in the web browser to show the results.

In the above screenshot you can see two columns with a single row in our table.

Write JQuery to add row in html table dynamically

In the above screenshot you can see I have written some JQuery code to add a row dynamically in the html table by clicking on button.

1. On line 29 you can see I have added a click event on the button by using it’s id “btn-add-row”.
2. On line 30 I have created a table column string.
3. On line 31 I have created a row string and append columns string in it.
4. On line 32 I have append the row in the table by using it’s id “my-table”.

Now let’s render this in the web browser and click on the button to add a new row.

Congratulations you have learned how to add row in html table dynamically using jquery.

You may also like:

• How to put image and text side by side in html
• How to set current date in input type date in html