Hi Dveleopers ,
Today we will learn how to add and delete rows dynamically using jquery
We are going to use .append() function to dynamically add a section and also .remove() functions to remove any section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Add and Delete Rows Dynamically Using jQuery - ITSolutionsGuides</title>
<style>
form{
margin: 20px;
}
form input, button{
padding: 5px;
}
table{
width: 90%;
margin: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
.delete-row, h2{
margin:20px;
}
</style>
</head>
<body style="border:1px solid grey">
<h2>How To Add and Delete Rows Dynamically Using jQuery - ITSolutionsGuides</h2>
<form>
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="Email Address">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Dhinesh Sekar</td>
<td>itsolutionsguides@test.com</td>
</tr>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Nivetha</td>
<td>itsolutionsguides@test.com</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides