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').*****(function () {
 var rex = new RegExp($(this).val(), 'i');
 $('.searchable').hide();
 $('.searchable').filter(function () {
 return rex.test($(this).text());

 }).show();
 });
 }(jQuery));
 });
</script>
3 ответа

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').*****(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, поискать плагин типа jQuery highlight plugin — подсветка слов в тексте и добавить