Фильтрация флажков и таблиц с использованием Javascript ⇐ CSS

[Anonymous]

Я работал с html-таблицей, в которой мне нужно было отфильтровать две вещи. Во-первых, есть таблица с данными, и когда мы нажимаем на заголовок столбца, отображается сетка фильтров, в которой мы видим текстовое поле, а под ним есть флажки. Я ищу решение, например, когда мы печатаем в текстовом поле, флажки будут фильтроваться по введенному тексту, и после этого нажмите кнопку «ОК», и таблица будет отфильтрована.
Вот что происходит: когда я набираю любую букву в текстовом поле, отображаются флажки со значением, содержащим эту букву, и после этого я нажимаю кнопку «ОК», отмеченные элементы будут отображаться в сетке ниже.
Теперь ничего не происходит. Когда мы щелкнем по столбцу заголовка, отобразится небольшая сетка фильтра, как показано на изображении ниже. При вводе любого символа в текстовое поле флажки, содержащие значение текста текстового поля, будут отображаться, другие флажки будут скрыты.
После этого, если мы нажмем на любой флажок, приведенная ниже большая сетка таблицы будет отфильтрована как фильтр Excel. Я хочу использовать эти две функции в этом решении.


Код показан ниже

Код: Выделить всё

$(document).ready(function() {
$("table th").click(function() {
showFilterOption(this);
});
});

var arrayMap = {};

function showFilterOption(tdObject) {
var filterGrid = $(tdObject).find(".filter");
if (filterGrid.is(":visible")) {
filterGrid.hide();
return;
}
$(".filter").hide();

var index = 0;
filterGrid.empty();
var allSelected = true;

filterGrid.append('');

filterGrid.append('All');

var $rows = $(tdObject).parents("table").find("tr");
var values = [];

$rows.each(function(ind, ele) {
if (ind >  0) {
var currentTd = $(ele).children()[$(tdObject).attr("index")];
if (!values.includes(currentTd.innerHTML)) {
values.push(currentTd.innerHTML);
var div = document.createElement("div");
div.classList.add("grid-item");
var str = $(ele).is(":visible") ? "checked" : "";
if ($(ele).is(":hidden")) {
allSelected = false;
}
div.innerHTML = '


Подробнее здесь: [url]https://stackoverflow.com/questions/78736411/filtering-checkboxes-and-tables-using-javascript[/url]