Một bảng HTML được tạo với các trường Tên thành viên, Email thành viên, Tên cha, phần, và điểm. Chúng tôi sẽ tạo một tệp HTML đơn giản và bao gồm tệp bootstrap và jquery.
Thêm Sửa Xóa Hàng Bảng Ví dụ sử dụng JQuery
index.html
<!DOCTYPE html>
<html>
<head>
<title>Add Edit Delete Table Row Example using JQuery - www.pakainfo.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2>Add Edit Delete Table Row Example using JQuery - www.pakainfo.com</h2>
<form>
<div class="form-group">
<label>Member Name:</label>
<input type="text" name="name" class="form-control" value="amit" required="">
</div>
<div class="form-group">
<label>Member Email:</label>
<input type="text" name="email" class="form-control" value="amit@domain_name.com" required="">
</div>
<button type="submit" class="btn btn-success save-btn">Save</button>
</form>
<br/>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Email</th>
<th width="200px">Action</th>
</thead>
<tbody>
</tbody>
</table>
</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 data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on("click", ".action-delete", function(){
$(this).parents("tr").remove();
});
$("body").on("click", ".action-edit", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');
$(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');
$(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")
$(this).hide();
});
$("body").on("click", ".action-cancel", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").find(".action-edit").show();
$(this).parents("tr").find(".action-update").remove();
$(this).parents("tr").find(".action-cancel").remove();
});
$("body").on("click", ".action-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('data-name', name);
$(this).parents("tr").attr('data-email', email);
$(this).parents("tr").find(".action-edit").show();
$(this).parents("tr").find(".action-cancel").remove();
$(this).parents("tr").find(".action-update").remove();
});
</script>
</body>
</html>
Hy vọng bạn đã hiểu về cách thêm, sửa và xóa hàng của một bảng HTML bằng jQuery.
- Bài đăng blog này được xuất bản ban đầu tại: https://www.pakainfo.com