Dynamically add and delete row from html table using jQuery

Here we will use jQuery for Row insertion and deletion.
Adding New row:
Consider we have following HTML table with ID=”tbl”

ID Name Age Action
ID Name Age

If we want to insert row then we have to add new row to the table.
We can add table row in following way.

var nrow = "<tr><td>new_row</td></tr>";
$("#tbl tr:last").after(nrow);


Delete Selected Row from Table:
Suppose we have delete button in each row. When we press delete button then it will delete that row.

For selecting row

var srow = $(this).parent().parent();// Selecting Row
srow.remove();// Removing Row


If you want to a confirmation message before delete, then you can use jQuery UI.
A Demo with jQuery UI.
Download Source Code