Форум

alex25region · #1 (**permalink**) 15.01.2017, 10:51

Добрый день!

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

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

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

рони · #2 (**permalink**) 15.01.2017, 11:46

alex25region,
если ошибок в html таблицы не будет, то можно так ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$('#Search').keyup(function () {
                var rex = new RegExp($(this).val(), 'i');
                $('.searchable').hide();
                $('.searchable').filter(function () {
                    return rex.test($(this).text());

                }).show().parent().prevUntil('tbody').find('.searchable').show();


            });
});
  </script>
</head>

<body>
 <input type="text" id="Search">
<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>
    <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>


</body>
</html>

alex25region · #3 (**permalink**) 15.01.2017, 12:12

рони, Спасибо друг! Помогло!
как добавить подсветку найденного, т.е. при наборе "Иванов", подсвечивалось в таблице "Иванов".

рони · #4 (**permalink**) 15.01.2017, 12:27

alex25region,
поискать плагин типа jQuery highlight plugin — подсветка слов в тексте и добавить

Форум

Справочник

Discord чат

Курсы javascript