Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2017, 11:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2017, 12:12
Новичок на форуме
Отправить личное сообщение для alex25region Посмотреть профиль Найти все сообщения от alex25region
 
Регистрация: 27.12.2016
Сообщений: 2

рони, Спасибо друг! Помогло!
как добавить подсветку найденного, т.е. при наборе "Иванов", подсвечивалось в таблице "Иванов".
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2017, 12:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
Фильтр Jquery Slider UI как на Я.Маркет GTAlex Элементы интерфейса 1 07.06.2013 15:15
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08
jQuery - переключение свойств у таблицы FladeX Работа 2 19.02.2010 11:31
соединение гармошки и таблицы в jquery alexandre jQuery 9 02.04.2009 21:40