In this article, I will show how add / remove rows
to a table with JQuery.
If you are complete new to JQuery, Then refer the JQuery Quick Start
This gives you basic understanding of JQuery.
Two JQuery methods append() and remove(), I am using to add / remove
rows from a table.
append is a JQuery method to add rows to a table
and remove to remove the rows from the table.
Syntax is,
// To append an element
$("table").append("element to add");
// To remove the element
$("table").remove();
addRow is a button to add rows and deleteRow is another
button to remove the rows of a table.
Complete source code is Here,
jquery_dynamic_table.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("table").append("<tr> <td>1</td> <td>David</td><td>Ronald</td><td>24</td> <td>21 2nd Street, New York</td> <td>212 555-1234</td> </tr>");
});
$("#delete").click(function(){
$("tr:last").remove();
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>Row No</th>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
<th>Address</th>
<th>PhoneNumber</th>
</tr>
</table>
<button id="add">addRow</button>
<button id="delete">deleteRow</button>
</body>
</html>
You can Try it your self by clicking the given link,
*** Venkat – Happy leaning ****