While performing CRUD operations, I have seen that beginners always find it difficult to perform the Edit and Update operation, the obvious reason is to not able to retrieve the selected table row values and display them in an updated form.
Today, I am sharing a very easy JQuery snippet that will be helpful to you for a lifetime whether you are working with a normal Html Table or Jquery DataTable, you will be easily able to show selected row data on a Form and later you can easily perform the Update operation.
Step 1. Create a table having Edit button on each row.
I am using Asp.Net MVC, you are free to use any framework, for this I am creating two Action Method, one method will return the view having the Employee details in an Html table, and the second method exposes the Employees data. The model is simple with just three properties.
Model:
namespace jquery.Models
{
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public int Salary { get; set; }
}
}
Controller:
namespace jquery.Controllers
{
public class TableController : Controller
{
//
// GET: /Table/
public ActionResult Index()
{
var emps = GetEmployee();
return View(emps);
}
public List<Employee> GetEmployee()
{
List<Employee> emps = new List<Employee>()
{
new Employee(){Id=1,Name="Michael",Salary=2000},
new Employee(){Id=2,Name="John",Salary=3400},
new Employee(){Id=3,Name="Tina",Salary=45000},
new Employee(){Id=4,Name="Saleem",Salary=43000},
new Employee(){Id=5,Name="Smith",Salary=65000},
};
return emps;
}
}
}
View:
@model IEnumerable<jquery.Models.Employee>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<table class="table table-bordered table-responsive" id="myTable">
<thead class="bg-dark text-white">
<tr>
<th>Id</th>
<th>Name</th>
<th>Salary</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Id</td>
<td>@item.Name</td>
<td>@item.Salary</td>
<td><button class="btnEdit btn btn-primary">Edit</button></td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Step 2.Design a Bootstrap Modal Dialog for Edit details.
<div class="modal" tabindex="-1" role="dialog" id="EditModal">
<form method="post" action="/Table/Update">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txtName">Name</label>
<input type="text" class="form-control" id="txtName" placeholder="Enter name" name="Name">
</div>
<div class="form-group">
<label for="txtName">Salary</label>
<input type="number" class="form-control" id="txtSalary" placeholder="Enter salary" name="Salary">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</form>
</div>
Step 3. Fill the textboxes on Edit Click and Open the Modal popup.
<script>
$(".btnEdit").click(function () {
debugger;
var currentTds = $(this).closest("tr").find("td"); // find all td of selected row
var cell2 = $(currentTds).eq(1).text(); // eq= cell , text = inner text
var cell3 = $(currentTds).eq(2).text();
$("#txtName").val(cell2);
$("#txtSalary").val(cell3);
$("#EditModal").modal('show');
});
</script>
Understand the JQuery code using below diagram.
Now, run the application and click on Edit button, a nice modal popup will open having current row data.
