Add Edit Delete operation using jQuery

HTML

CSS

Output

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Add Edit Delete operation using jQuery</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>

<body>

<div class="container">
		<div class="row">
			<div class="col-md-10 offset-md-1">
				<h1 class="text-center text-primary">Add Edit Delete operation using jQuery</h1>

<div class="mb-3">
						<label>Email Address</label>
						<input type="text" name="email" class="form-control" required>
					</div>
					<button type="submit" class="btn btn-success save-btn">Save</button>
				</form>
				<br />
				<table class="table table-bordered data-table">
					<thead>
						<th>Full Name</th>
						<th>Email Address</th>
						<th width="250px">Action</th>
					</thead>
					<tbody>
                        
					</tbody>
				</table>
			</div>
		</div>

</div>

</body>

</html>

CSS

JS

$("form").submit(function (e) {
			e.preventDefault();
			var name = $("input[name='name']").val();
			var email = $("input[name='email']").val();

$(".data-table tbody").append("<tr nameHere='" + name + "' emailHere='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button class='btn btn-info btn-edit ms-2 mt-2'>Edit</button><button class='btn btn-danger btn-delete ms-2 mt-2'>Delete</button></td></tr>");

$("input[name='name']").val('');
			$("input[name='email']").val('');
		});

$("body").on("click", ".btn-delete", function () {
			$(this).parents("tr").remove();
		});

$("body").on("click", ".btn-edit", function () {
			var name = $(this).parents("tr").attr('nameHere');
			var email = $(this).parents("tr").attr('emailHere');

$(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" class="form-control" value="' + name + '">');
			$(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" class="form-control" value="' + email + '">');

$(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-update ms-2 mt-2'>Update</button><button class='btn btn-warning btn-cancel ms-2 mt-2'>Cancel</button>")
			$(this).hide();
		});

$("body").on("click", ".btn-cancel", function () {
			var name = $(this).parents("tr").attr('nameHere');
			var email = $(this).parents("tr").attr('emailHere');

$(this).parents("tr").find("td:eq(0)").text(name);
			$(this).parents("tr").find("td:eq(1)").text(email);

$(this).parents("tr").find(".btn-edit").show();
			$(this).parents("tr").find(".btn-update").remove();
			$(this).parents("tr").find(".btn-cancel").remove();
		});

$("body").on("click", ".btn-update", function () {
			var name = $(this).parents("tr").find("input[name='edit_name']").val();
			var email = $(this).parents("tr").find("input[name='edit_email']").val();

$(this).parents("tr").find("td:eq(0)").text(name);
			$(this).parents("tr").find("td:eq(1)").text(email);

$(this).parents("tr").attr('nameHere', name);
			$(this).parents("tr").attr('emailHere', email);

$(this).parents("tr").find(".btn-edit").show();
			$(this).parents("tr").find(".btn-cancel").remove();
			$(this).parents("tr").find(".btn-update").remove();
		});

Ui Code Snippets

Add Edit Delete operation using jQuery

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Add Edit Delete operation using jQuery

HTML

CSS

JS

Output

Network Marketing

SEO Course