jQuery Add New Table Row
Learn how JQuery Add New Table Row
Published
jQuery Add New Table Row
In real world application you might need to add new rows inside table dynamically using jQuery. Using, it’s really simple to add new rows at the end of table. The following exmaple is using the after method to insert the new row HTML. However, please note that the selector is important which is $('#ProductList tr:last') So, tr:last means insert after the last row.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<table id="ProductList">
<tbody>
<tr><td>S#</td><td>Name</td></tr>
<tr><td>1</td><td>Mango</td></tr>
</tbody>
</table>
<script>
$('#ProductList tr:last').after('<tr><td>2</td><td>Apple</td></tr>');
</script>
</body>
</html>