Saat melakukan operasi CRUD, saya telah melihat bahwa pemula selalu merasa kesulitan untuk melakukan operasi Edit dan Perbarui, alasan yang jelas adalah tidak dapat mengambil nilai baris tabel yang dipilih dan menampilkannya dalam bentuk yang diperbarui
Hari ini, saya membagikan cuplikan JQuery yang sangat mudah yang akan membantu Anda seumur hidup apakah Anda bekerja dengan Tabel Html normal atau Tabel Data Jquery, Anda akan dapat dengan mudah menampilkan data baris yang dipilih pada Formulir dan nantinya Anda dapat dengan mudah
Langkah 1. Buat tabel dengan tombol Edit di setiap baris
Saya menggunakan Asp. Net MVC, Anda bebas menggunakan kerangka kerja apa pun, untuk ini saya membuat dua Metode Tindakan, satu metode akan mengembalikan tampilan yang memiliki detail Karyawan dalam tabel Html, dan metode kedua memperlihatkan data Karyawan. Modelnya sederhana dengan hanya tiga properti
Model
namespace jquery.Models { public class Employee { public int Id { get; set; } public string Name { get; set; } public int Salary { get; set; } } }Pengontrol
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; } } } _Melihat
@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="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="//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>Langkah 2. Rancang Dialog Modal Bootstrap untuk Mengedit detail
<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> tabel HTMLLangkah 3. Isi kotak teks pada Edit Klik dan Buka munculan Modal
Pahami kode JQuery menggunakan diagram di bawah ini
Ambil nilai sel baris yang dipilihSekarang, jalankan aplikasi dan klik tombol Edit, popup modal yang bagus akan terbuka dengan data baris saat ini