Lọc các hàng trong bảng với jquery

Question

Tôi muốn biết cách lọc các hàng trong bảng dựa trên giá trị cột. Các plugin bị loại trừ, tôi muốn tìm ra cách làm cho điều này hoạt động.

Answer 1

Câu hỏi của bạn là khá mơ hồ, nhưng ý tưởng chung sẽ là một cái gì đó như thế này:

$("td").filter(function() { 
    return $(this).text().indexOf("whatever") !== -1; 
}).parent().remove(); 

Dưới đây là một working example. Trước tiên, nó sẽ chọn tất cả các ô bảng, sau đó lọc chúng dựa trên một số văn bản và loại bỏ phần tử gốc (phải là tr) của bất kỳ hàng còn lại nào.

Nếu bạn không quan tâm đến các cột riêng lẻ, bạn có thể chọn các yếu tố tr và loại bỏ cuộc gọi đến parent. Điều đó sẽ vẫn hoạt động vì text sẽ trả về văn bản của tất cả các trẻ em trong số tr được chọn.

Cập nhật dựa trên ý kiến ​​

trên sẽ loại bỏ các hàng bảng phù hợp với từ DOM hoàn toàn. Nếu bạn chỉ muốn ẩn chúng, bạn có thể thay thế remove bằng hide. Nếu sau đó bạn muốn làm cho các hàng có thể nhìn thấy một lần nữa bạn chỉ có thể làm một cái gì đó như:

$("tr").show(); 

nào sẽ chọn tất cả các tr yếu tố và cho thấy họ (những người mà đã có thể nhìn thấy sẽ không bị ảnh hưởng, vì vậy chỉ những ẩn trước sẽ trở thành hiển thị một lần nữa).

Answer 2

Ý tưởng cơ bản đằng sau tất cả lọc bảng là ẩn tất cả các hàng và sau đó hiển thị những nội dung có nội dung của <td> có bao gồm chuỗi tìm kiếm.

Với jQuery sự kỳ diệu được thực hiện như thế này:

$('tr').filter(":contains('" + searchstring + "')").show(); 

Nhưng không có nhu cầu sử dụng jQuery cho điều này - Tôi đã được mã hóa một JS-giải pháp đơn giản cho nó. Bạn có thể tìm thấy nó here.