CRUD operation ( Create update and delete) in table row using jQuery

In this tutorial we will learn how to perform CRUD operation ( Create Read Update and Delete) in table row using jQuery.

Here we used bootstrap to designing our form and jQuery to perform all our create reade update delete ( CRUD ) operation.

Let's see the code by which we perform CRUD operation ( Create Read Update and Delete) in table row using jQuery.

CRUD operation ( Create Read Update and Delete) in table row using jQuery

HTML

<!DOCTYPE html>
<html>

<head>
	<title>CRUD operation ( Create Read Update and Delete) in table row 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-8 offset-md-2">
				<h1 class="text-center text-primary">CRUD operation ( Create update and delete) in table row using jQuery</h1>

				<form>
					<div class="mb-3">
						<label>Full Name</label>
						<input type="text" name="name" class="form-control" required>
					</div>

					<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>
                        <!-- here code append using jquery dynamically -->
					</tbody>
				</table>
			</div>
		</div>

	</div>

</body>

</html>

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

Let's combine HTML and JS code to perform CRUD operation using jQuery

<!DOCTYPE html>
<html>

<head>
	<title>CRUD operation ( Create update and delete) in table row 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-8 offset-md-2">
				<h1 class="text-center text-primary">CRUD operation ( Create update and delete) in table row using jQuery</h1>

				<form>
					<div class="mb-3">
						<label>Full Name</label>
						<input type="text" name="name" class="form-control" required>
					</div>

					<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>
                        <!-- here code append using jquery dynamically -->
					</tbody>
				</table>
			</div>
		</div>

	</div>

	<script type="text/javascript">

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

	</script>

</body>

</html>

Output

CRUD operation ( Create update and delete) in table row using jQuery

CRUD operation ( Create Read Update and Delete) in table row using jQuery

Enter your details before comment