Показать сообщение отдельно
  #1 (permalink)  
Старый 15.01.2017, 10:51
Новичок на форуме
Отправить личное сообщение для alex25region Посмотреть профиль Найти все сообщения от alex25region
 
Регистрация: 27.12.2016
Сообщений: 2

Jquery фильтр таблицы - беда с заголовками
Добрый день!

Как реализовать при поиске отображение заголовков???
Т.е. при нахождении строки с удовлетворяющим запросом, отображался отдел и поле с заголовками, остальные отделы скрывались.

Есть таблица, которая имеет следующий вид (во вложенном файле) со следующим кодом:

<table class="searchable table table-hover table-striped table-bordered table-condensed">
    <thead>
    <tr class="searchable">
        <th colspan="4" style="text-align: center" class="warning"><span><b>Руководство</b></span></th>
    </tr>
    </thead>
    <thead>
    <tr class="searchable">
        <th style="text-align: center" class="info">ФИО</th>
        <th style="text-align: center" class="info">Должность</th>
        <th style="text-align: center" class="info">IP-телефон</th>
        <th style="text-align: center" class="info">Городской телефон</th>
    </tr>
    </thead>
    <tbody>
    <tr class="searchable">
        <td><b>Иванов</b> Иван Николаевич</td>
        <td>Директор</td>
        <td>1034</td>
        <td>8-914-1234567</td>
    </tr>
    <tr class="searchable">
        <td><b>Сидоров</b> Сидор Иванович</td>
        <td>Заместитель директора</td>
        <td>1119</td>
        <td>8-914-7654321</td>
    </tr>
    <tr class="searchable">
        <td><b>Алексеев</b> Алексей Александрович</td>
        <td>Бухгалтер</td>
        <td>1032</td>
        <td>8-914-7651234</td>
    </tr>
    </tbody>
    <thead>
    <tr class="searchable">
        <th class="warning" colspan="4" style="text-align: center"><span><b>Бухгалтерия</b></span></th>
    </tr>
    </thead>
    <thead>
    <tr class="searchable">
        <th style="text-align: center" class="info">ФИО</th>
        <th style="text-align: center" class="info">Должность</th>
        <th style="text-align: center" class="info">IP-телефон</th>
        <th style="text-align: center" class="info">Городской телефон</th>
    </tr>
    </thead>
    <tbody
    <tr class="searchable">
        <td><b>Иванов</b> Алексей Алексеевич</td>
        <td>Старший бухгалтер</td>
        <td>1176</td>
        <td>8-924-1324567</td>
    </tr>
    <tr class="searchable">
        <td><b>Медвелева</b> Марина Александровна</td>
        <td>Старший бухгалтер</td>
        <td>1041</td>
        <td>8-924-1324576/td>
    </tr>
    </tbody>
    <thead>
    <tr class="searchable">
        <th class="warning" colspan="4" style="text-align: center"><span><b>Менелжмент</b></span></th>
    </tr>
    </thead>
    <tr class="searchable">
        <th style="text-align: center" class="info">ФИО</th>
        <th style="text-align: center" class="info">Должность</th>
        <th style="text-align: center" class="info">IP-телефон</th>
        <th style="text-align: center" class="info">Городской телефон</th>
    </tr>
    </thead>
    <tbody>
    <tr class="searchable">
        <td><b>Энштейн</b> Алексей Арнольдович</td>
        <td>Старший менеджер</td>
        <td>1177</td>
        <td>8-924-1324567</td>
    </tr>
    <tr class="searchable">
        <td><b>Жарков</b> Иван Петрович</td>
        <td>Младший менеджер</td>
        <td>1077</td>
        <td>8-924-1324567</td>
    </tr>
    </tbody>
</table>


и поиск по таблице:
<script type="text/javascript">
    //поиск по таблице - begin
    $(document).ready(function () {
        (function ($) {
            $('#Search').keyup(function () {
                var rex = new RegExp($(this).val(), 'i');
                $('.searchable').hide();
                $('.searchable').filter(function () {
                    return rex.test($(this).text());

                }).show();
            });
        }(jQuery));
    });
</script>
Изображения:
Тип файла: jpg Screenshot_1.jpg (66.7 Кб, 4 просмотров)
Ответить с цитированием