Поиск значения в столбце, а затем фильтрация таблицы после сопоставленных результатов

Question

Чего я пытаюсь достичь

Short: Поиск значения в столбце, а затем таблица фильтрации после сопоставленных результатов

Я получил HTML кнопки, для которых определено значение. При нажатии кнопки передайте значение в строку: value, затем найдите значение в первом столбце, сопоставьте значение с содержимым столбца и скройте те, которые не соответствуют.

Я хочу добиться этого с помощью jQuery.

Моя проблема

Кажется, я застрял в том, как искать конкретный столбец и как сопоставить его со строкой value. Я использую селектор pseudo, чтобы найти столбец. Я скрываю все несоответствия.

Строка, которая должна обрабатывать это:

$(this).toggle("td:nth-child(1)").text().toLowerCase().includes(value);

Код и DOM

HTML

<button type="button" id="res_btn" value="R" class="btn btn-light">Research</button>

JQuery

$('#res_btn').on('click', function() {
    var value = $(this).val().toLowerCase();
    $('#table tr:not(:has(th))').filter(function() {
        //line im struggling with   
        $(this).toggle("td:nth-child(1)").text().toLowerCase().includes(value);
        console.log(this);
    });
});

Я пытался найти похожие вопросы целую вечность, но ни один из них не относится к моим Однако, если вы обнаружите другие вопросы, которые могут иметь такую ​​же проблему, пожалуйста, свяжите их.

Answer 1

Я решил это с помощью .indexOf(), чтобы сопоставить столбец со строкой. Затем я спрятал родителей и для сброса видимости я показываю все tr (исключая th) внутри функции .filter().

Я реализовал это так:

$('#res_btn').on('click', function() {
    var value = $(this).val().toLowerCase();
    $('td:nth-child(1)').filter(function() {
        $('tr:not(:has(th))').show();
        return $(this).text().toLowerCase().indexOf(value);
    }).parent().hide();
});

Спасибо @ Andreas , который связался с похожим вопросом.