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

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ết

jQuery3. 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 name cho mỗi hộp kiểm và value với id sản phẩm




	
	Multiple Table Rows Selection Example using jQuery
	
	
	



Multiple Table Rows Selection Example using jQuery

ID Code Name Price
1 AMTR01 American Tourist 12000
2 USB02 EXP Portable Hard Drive 5000
3 SH03 Shoes 1000
4 LPN4 XP 1155 Intel Core Laptop 80000
5 3DCAM01 FinePix Pro2 3D Camera 150000
6 MB06 Simple Mobile 3000
7 WristWear03 Luxury Ultra thin Wrist Watch 3000
8 HD08 Headphone 400

Kiểm tra/bỏ chọn bằng jQuery

Bâ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 đề

$(function() {
	//If check_all checked then check all table rows
	$("#check_all").on("click", function () {
		if ($("input:checkbox").prop("checked")) {
			$("input:checkbox[name='row-check']").prop("checked", true);
		} else {
			$("input:checkbox[name='row-check']").prop("checked", false);
		}
	});

	// Check each table row checkbox
	$("input:checkbox[name='row-check']").on("change", function () {
		var total_check_boxes = $("input:checkbox[name='row-check']").length;
		var total_checked_boxes = $("input:checkbox[name='row-check']:checked").length;

		// If all checked manually then check check_all checkbox
		if (total_check_boxes === total_checked_boxes) {
			$("#check_all").prop("checked", true);
		}
		else {
			$("#check_all").prop("checked", false);
		}
	});
});

áp dụng phong cách

Chú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.