Bài đăng trên blog này sẽ xác định quy trình lọc bảng trong JavaScript.
Làm cách nào để lọc bảng trong JavaScript?
Hãy xem một ví dụ giải thích cách lọc bảng trong JavaScript.
Thí dụ
Đầu tiên, tạo một thanh tìm kiếm trong tài liệu HTML với “ onkeyup ” thuộc tính gọi là “ bộ lọcTableFunc() ” khi chìa khóa được phát hành:
< kiểu đầu vào = 'chữ' Tôi = 'Tìm kiếm' onkeyup = 'bộ lọcTableFunc()' giữ chỗ = 'Tìm kiếm.....' >< anh >< anh >
Tạo một bảng lưu trữ dữ liệu nhân viên bằng cách sử dụng
< id bảng = 'nhân viên dữ liệu' biên giới = '1' >
< tr >
< thứ tự > Tên thứ tự >
< thứ tự > E-mail thứ tự >
< thứ tự > Giới tính thứ tự >
< thứ tự > chỉ định thứ tự >
< thứ tự > Ngày tham gia thứ tự >
tr >
< tr >
< td > John td >
< td > John @ gmail. với td >
< td > Nam giới td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stephen td >
< td > bước @ gmail. với td >
< td > Nam giới td >
< td > nhân sự td >
< td > hai mươi mốt / 10 / 2020 td >
tr >
< tr >
< td > To lớn td >
< td > mari78 @ gmail. với td >
< td > Giống cái td >
< td > nhân sự td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. với td >
< td > Nam giới td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
bàn >
Sau khi thực thi tệp HTML, đầu ra sẽ như thế này:
Sau đó, hãy thêm chức năng vào bảng bộ lọc. Trong tệp tập lệnh JavaScript hoặc thẻ, hãy sử dụng mã bên dưới để lọc dữ liệu của bảng dựa trên tìm kiếm:
hàm số bộ lọcTableFunc ( ) {
là bộ lọcKết quả = tài liệu. getElementById ( 'Tìm kiếm' ) . giá trị . toLowerCase ( ) ;
là empTable = tài liệu. getElementById ( 'nhân viên dữ liệu' ) ;
là tr = empTable. getElementsByTagName ( 'tr' ) ;
vì ( là tôi = 1 ; tôi < Tr. chiều dài ; tôi ++ ) {
tr [ tôi ] . Phong cách . trưng bày = 'không ai' ;
hăng sô tdArray = tr [ tôi ] . getElementsByTagName ( 'td' ) ;
vì ( là j = 0 ; j - 1 ) {
tr [ tôi ] . Phong cách . trưng bày = '' ;
phá vỡ ;
}
}
}
}
Trong đoạn mã trên:
- Đầu tiên, xác định một chức năng “ bộ lọcTableFunc() ”.
- Truy cập thanh tìm kiếm bằng cách sử dụng id của nó “ Tìm kiếm ” để lấy giá trị đã nhập và chuyển đổi nó thành chữ thường bằng cách sử dụng “ toLowerCase() ' phương pháp.
- Nhận tham chiếu đến bảng nơi thao tác lọc sẽ được thực hiện bằng cách sử dụng id “ nhân viêndữ liệu ”.
- Sau đó, lấy các hàng của bảng bằng cách sử dụng “ getElementsByTagName ' phương pháp.
- Lặp lại bảng theo chiều dài của nó, lấy dữ liệu cho từng mục trong bảng và kiểm tra xem giá trị được lưu trữ của bảng có bằng giá trị được tìm kiếm hay không. Nếu có, sau đó hiển thị nó.
đầu ra
Đầu ra ở trên cho biết rằng thao tác lọc đã được áp dụng thành công cho bảng.
Sự kết luận
Một bảng có thể được lọc bằng JavaScript bằng cách lặp qua dữ liệu của bảng và trả về dữ liệu có liên quan. Quá trình lọc này được thực hiện thông qua một chức năng được gọi theo một sự kiện cụ thể. Cách tiếp cận này sẽ hoạt động theo cách mà trên dữ liệu giống hệt nhau được nhập, dữ liệu tương ứng từ bảng sẽ được tìm nạp, bất kể phân biệt chữ hoa chữ thường trong trường văn bản đầu vào. Bài đăng này mô tả một cách tiếp cận có thể được sử dụng để lọc bảng trong JavaScript.