Функция jQuery для фильтрации нескольких столбцов

Question

Я пытаюсь написать функцию jQuery для применения фильтров к нескольким столбцам. Пример:

html

<table id="myTable" class="table table-sm">
    <thead class="thead-light">
        <tr>
            <th scope="col">Address</th>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>    
            <td><input type="text" class="form-control search" onkeyup="filterTable('#myTable', $(this).val().toLowerCase(), 0);"></td>
            <td><input type="text" class="form-control search" onkeyup="filterTable('#myTable', $(this).val().toLowerCase(), 1);"></td>
            <td><input type="text" class="form-control search" onkeyup="filterTable('#myTable', $(this).val().toLowerCase(), 2);"></td>
        </tr>

        <?php while ($row = $res->fetchArray()) { ?>
        <tr>    
            <td><?php echo "{$row["address"]}"?></td>
            <td><?php echo "{$row["name"]}"?></td>
            <td><?php echo "{$row["description"]}"?></td>
        </tr>
        <?php } ?>      
    </tbody>
</table>

js

function filterTable(table, text, col) {
    $(table + " > tbody > tr").not(':first').find("td").eq(col).filter(function() {
        $(this).closest("tr").toggle($(this).text().toLowerCase().indexOf(text) > -1)
    });
}   

Когда происходит событие keyup, вызывается функция filterTable, передающая идентификатор таблицы вбудет отфильтрован текст, вставленный пользователем, и индекс столбца.

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

Даже при наборе чего-либо только в одном текстовом поле ввода поведение не корректно: когда я набираю что-то, что не соответствует все строки скрыты.

Я искал похожие вопросы (например, фильтры столбцов jQuery ), но ответы, похоже, не работают - при применении другого фильтра предыдущий удаляется.

ОБНОВЛЕНИЕ

Это фактический сгенерированный HTML-код:

<table id="tableParameters" class="table table-sm">
    <thead class="thead-light">
        <tr>
            <th scope="col">Address</th>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>    
            <td><input type="text" class="form-control search" onkeyup="filterTable('#tableParameters', $(this).val().toLowerCase(), 0);"></td>
            <td><input type="text" class="form-control search" onkeyup="filterTable('#tableParameters', $(this).val().toLowerCase(), 1);"></td>
            <td><input type="text" class="form-control search" onkeyup="filterTable('#tableParameters', $(this).val().toLowerCase(), 2);"></td>
        </tr>

        <tr>    
            <td>1000</td>
            <td>Date</td>
            <td>Date of the event</td>
        </tr>
        <tr>    
            <td>1001</td>
            <td>Time</td>
            <td>Time of the event</td>
        </tr>
        <tr>    
            <td>1002</td>
            <td>Code</td>
            <td>Requested code</td>
        </tr>

    </tbody>
</table>

Answer 1

Вы делаете это неправильно, функция filterTable должна быть такой:

function filterTable(table) {
    var filterColumn1Value = $(table + " > tbody > tr:first-child").find('td').eq(0).find('input').first().val().toLowerCase();
    var filterColumn2Value = $(table + " > tbody > tr:first-child").find('td').eq(1).find('input').first().val().toLowerCase();
    var filterColumn3Value = $(table + " > tbody > tr:first-child").find('td').eq(2).find('input').first().val().toLowerCase();
    $(table + " > tbody > tr").not(':first').filter(function() {
        var column1Value = $(this).find("td").eq(0).text().toLowerCase();
        var column2Value = $(this).find("td").eq(1).text().toLowerCase();
        var column3Value = $(this).find("td").eq(2).text().toLowerCase();
        $(this).toggle(column1Value.indexOf(filterColumn1Value) > -1 &&
                column2Value.indexOf(filterColumn2Value) > -1 &&
                column3Value.indexOf(filterColumn3Value) > -1)
    });
}

И вызов функции должен быть просто:

filterTable('#tableParameters');