Add Edit Delete operation using jQuery

HTML

CSS

Output

HTML Copied

<!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 Copied

JS Copied

$("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();
		});