Простая фильтрация таблицы на Jquery

Рассмотрим как создать простую таблицу с возможностью фильтрации данных. Для удобства и простоты будем использовать Jquery.

Пример работы ниже. Вы можете начинать вводить данные и вам будут подставляться нужные результаты. Можно фильтровать сразу через все поля.

Демонстрация

Создание таблицы с фильтрацией

Реализация очень простая. Вам нужно лишь вставить разметку, подключить jquery и скрипт.

html-разметка таблицы

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

<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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<script>
$('.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>

Подключили библиотеку jquery и сам скрипт. Не забудьте, что js-скрипты должны идти после html-разметки. Если есть вопросы, пишите в комментарии