trong hướng dẫn jQuery này, Chúng tôi sẽ cho bạn biết Cách tự động thêm và xóa các hàng trong bảng bằng jQuery. Trước đó, chúng tôi đã quản lý khả năng này bằng javascript, nhưng với jQuery, bạn có thể làm như vậy chỉ với một vài dòng mã
Đôi khi, chúng tôi cần thêm và xóa các hàng trong một bảng một cách nhanh chóng, do đó, tôi đang tìm kiếm một kỹ thuật để tạo các hàng mẫu và tự động thêm chúng vào phần thân của bảng. jQuery có thể nhanh chóng tạo một hàng và thêm nó vào bảng hoặc xóa nó khỏi bảng
Bạn cũng có thể đọc các hướng dẫn trước đây của tôi Màu thay thế các hàng trong bảng bằng cách sử dụng jQuery
Ngoài ra, hãy xem các hướng dẫn jQuery hữu ích khác,
- Ví dụ đơn giản về phân trang bằng jQuery và Bootstrap
- Multi Step Form với Progress Bar sử dụng jQuery và Bootstrap CSS
- Ví dụ đơn giản về ẩn, hiển thị và chuyển đổi phần tử bằng jQuery
- Tự động thêm và xóa các hàng trong bảng bằng jquery
Video hướng dẫn
Nếu bạn thấy thoải mái hơn khi xem video giải thích Tự động thêm và xóa các hàng khỏi bảng HTML bằng jQuery, thì bạn nên xem video hướng dẫn này
Tôi sẽ cung cấp cho bạn mã jQuery đơn giản để tạo một hàng và thêm vào bảng và khi nhấp vào nút xóa, hàng đó có thể xóa khỏi bảng
Các bước đơn giản để tự động thêm và xóa các hàng khỏi bảng như sau,
Tự động thêm/xóa hàng trong bảng HTML bằng jQuery
Bước 1. Chúng tôi sẽ tạo một tệp index.html
mới và bao gồm các tệp thư viện jQuery và Bootstrap vào phần head
của tệp index.html
Bước 2. Chúng tôi sẽ thêm một bảng HTML vào tệp index.html
sẽ chứa tất cả các bản ghi trong bố cục lưới. Chúng tôi sẽ nối hàng mới được tạo động với phần thân của bảng này
Ở đây, tôi đã chuyển id bảng
0 và id thân bảng
1 để xác định các hàng nội dung của bảng và bảng. Tôi đã thêm nút xóa trên mỗi hàng và thêm ID bản ghi trên thuộc tính tùy chỉnh [
2] để xóa một hàng cụ thể
Bước 3. Đã tạo một hàng mẫu và nội dung sẽ nối vào bảng
. ABC Posts 04 21 to 42 years 5200-20200/-
Bước 4. Chúng tôi sẽ tạo một nút sẽ thêm một hàng trong bảng, khi người dùng sẽ nhấp vào nút này
Bước 5. Tạo sự kiện trên nút [Bước 3] và thêm chức năng tạo bản sao của hàng [Bước 2], cuối cùng, nối hàng đã sao chép vào bảng mục tiêu
3
________số 8_______
Chúng tôi đã tạo một bản sao của hàng [Bước 2] và chèn số sê-ri của hàng vào cuối mã jQuery – Chúng tôi đã thêm vào bằng
4
Bước 6. Hãy tạo một sự kiện xóa sẽ kích hoạt khi người dùng nhấp vào biểu tượng xóa trên hàng của bảng
jQuery[document].delegate['a.delete-record', 'click', function[e] { e.preventDefault[]; var didConfirm = confirm["Are you sure You want to delete"]; if [didConfirm == true] { var id = jQuery[this].attr['data-id']; var targetDiv = jQuery[this].attr['targetDiv']; jQuery['#rec-' + id].remove[]; //regnerate index number on table $['#tbl_posts_body tr'].each[function[index] { //alert[index]; $[this].find['span.sn'].html[index+1]; }]; return true; } else { return false; } }];
Ở đây, tôi đang tìm hàng
5 sau đó xóa hàng đó khỏi bảng và tạo lại chỉ mục của từng hàng