Bảng Bootstrap chọn nhiều hàng
Trong hướng dẫn này, chúng ta sẽ xem cách kiểm tra hoặc chọn nhiều hộp kiểm trên bảng HTML bằng jQuery. Chúng tôi sẽ đặt hộp kiểm đối với từng hàng trên bảng để người dùng có thể chọn một hàng cụ thể. Chúng tôi cũng sẽ đặt một hộp kiểm trên tiêu đề bảng và chọn hộp kiểm này, tất cả các hàng trên bảng sẽ được chọn. Bỏ chọn hộp kiểm tiêu đề sẽ bỏ chọn hộp kiểm Show
Chúng tôi đang sử dụng jQuery để kiểm tra hoặc kiểm tra hộp kiểm. Nếu người dùng chọn thủ công tất cả các hộp kiểm cho các hàng trên bảng thì hộp kiểm trong tiêu đề bảng sẽ được kiểm tra tự động để cho biết rằng tất cả các hộp kiểm trên thân bảng đều được chọn. Nếu bất kỳ hộp kiểm nào trên thân bảng không được chọn, hộp kiểm tiêu đề sẽ tự động được bỏ chọn điều kiện tiên quyếtjQuery3. 5. 0 Bảng dữ liệuĐầu tiên chúng ta sẽ xem cách đưa một số dữ liệu mẫu hoặc sản phẩm vào bảng HTML. Chúng tôi viết mã dưới đây vào một tệp có tên select-multiple-rows-html-table-jquery. html Chúng tôi đã bao gồm jQuery từ liên kết CDN và mã jQuery bắt buộc từ ứng dụng. tập tin js. Chúng tôi cũng đã bao gồm bảng tệp CSS. css để áp dụng một số kiểu cơ bản trên bảng HTML Chúng tôi đã đặt 8 hàng trong thân bảng và một tiêu đề. Trong tiêu đề, chúng tôi đã đặt một hộp kiểm để kiểm tra tất cả các hộp kiểm trong phần thân bảng. Chúng tôi cũng có hộp kiểm riêng lẻ để chọn hàng riêng lẻ Chúng tôi đã đặt
Kiểm tra/bỏ chọn bằng jQueryBây giờ chúng ta sẽ viết mã jQuery trong ứng dụng. js để kiểm tra hoặc bỏ chọn các hộp kiểm Nếu chúng tôi nhấp vào hộp kiểm tiêu đề thì chúng tôi chọn tất cả các hộp kiểm trên thân bảng Nếu chúng tôi kiểm tra từng hộp kiểm theo cách thủ công và khi chúng tôi kiểm tra tất cả các hộp kiểm cuối cùng thì chúng tôi cũng kiểm tra hộp kiểm tiêu đề
áp dụng phong cáchChúng tôi áp dụng một số kiểu cơ bản trên bảng HTML. Chúng tôi làm cho tiêu đề màu đen. Chúng tôi áp dụng màu trên các hàng chẵn hoặc lẻ của bảng HTML. Chúng tôi chuyển đổi chữ thường thành chữ in hoa cho tiêu đề Làm cách nào để chọn nhiều hàng trong bảng bootstrap?Sử dụng multipleSelectRow để chọn hàng có nhiều lựa chọn . Có thể sử dụng ctrl+click để chọn một hàng hoặc sử dụng shift+click để chọn nhiều hàng.
Làm cách nào để chọn hàng trong bảng bootstrap?trên BootstrapTable sẽ cho phép lựa chọn trên bảng. Theo hành vi mặc định, người dùng cần nhấp vào cột lựa chọn hoặc hộp kiểm/đài để chọn/bỏ chọn một hàng, đối với góc độ trải nghiệm người dùng, chúng tôi có selectoRow. clickToSelect để cho phép người dùng chọn/bỏ chọn hàng bằng cách nhấp vào hàng .
Làm cách nào để chọn nhiều hàng bằng hộp kiểm trong javascript?Property rowSelection='multiple' được đặt để cho phép lựa chọn nhiều hàng. Có thể chọn nhiều hàng bằng cách giữ Ctrl và nhấp chuột vào các hàng . Một loạt các hàng có thể được chọn bằng cách sử dụng Shift.
Làm cách nào để đánh dấu hàng của bảng trên bootstrap di chuột?Để đánh dấu hàng của bảng khi di chuột trong bootstrap, bạn chỉ cần sử dụng. lớp di chuột trên bảng có phần tử bảng . Không cần javascript. |