JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<table id="filter-table">
    <tr>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Отчество</th>
    </tr>
    <tr class='table-filters'>
        <td>
            <input type="text"/>
        </td>
        <td>
            <input type="text"/>
        </td>
        <td>
            <input type="text"/>
        </td>
    </tr>
    <tr class='table-data'>
        <td>Иван</td>
        <td>Петров</td>
        <td>Викторович</td>
    </tr>
    <tr class='table-data'>
        <td>Василий</td>
        <td>Иванов</td>
        <td>Александрович</td>
    </tr>
    <tr class='table-data'>
        <td>Иван</td>
        <td>Иванов</td>
        <td>Викторович</td>
    </tr>
    <tr class='table-data'>
        <td>Петр</td>
        <td>Петров</td>
        <td>Александрович</td>
    </tr>
    <tr class='table-data'>
        <td>Александр</td>
        <td>Петров</td>
        <td>Викторович</td>
    </tr>
</table>

CSS

#filter-table{
        width: 100%;
    }
    #filter-table th{
        background-color: #dadada;
    }
    #filter-table td, #filter-table th{
        padding: 5px;
        border-bottom: 1px solid #ccc;
    }

JavaScript

$('.table-filters input').on('input', function () {
    filterTable($(this).parents('table'));
});

function filterTable($table) {
    var $filters = $table.find('.table-filters td');
    var $rows = $table.find('.table-data');
    $rows.each(function (rowIndex) {
        var valid = true;
        $(this).find('td').each(function (colIndex) {
            if ($filters.eq(colIndex).find('input').val()) {
                if ($(this).html().toLowerCase().indexOf(
                $filters.eq(colIndex).find('input').val().toLowerCase()) == -1) {
                    valid = valid && false;
                }
            }
        });
        if (valid === true) {
            $(this).css('display', '');
        } else {
            $(this).css('display', 'none');
        }
    });
}
</script>