Простенький фильтр значений по таблице

@ember74 · Регистрация: 07.10.2015

Студворк — интернет-сервис помощи студентам

Есть таблица:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<select id="ldap-dep">
  <option>Все отделы</option>
  <option>ИТ</option>
  <option>КЖ</option>
  <option>Столовая</option>
  <option>ИТКО</option>
</select>
<table id="ldap-data">
    <tr>
        <td id="dep">ИТ</td>
    </tr>
    <tr>
        <td id="dep">КЖ</td>
    </tr>
    <tr>
        <td id="dep">Столовая</td>
    </tr>
    <tr>
        <td id="dep">ИТКО</td>
    </tr>
</table>

и код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#ldap-dep').change(function(){ 
    var filterN = $('#ldap-dep').val(); 
 
    $('#ldap-data tr').each(function () { 
        if(filterN == 'Все отделы'){
           $(this).show();
        }else{
            var n = $(this).find('#dep').text();
            if (n.search(new RegExp(filterN,'i')) < 0) {
                $(this).hide();
            } else {
                $(this).show();
            }
        }
    });
});

Все работает, при изменение значения select данные выводит/скрывает, НО проблема в том, что когда я выбирают в select ИТ, выводит ИТ и ИТКО. Скажите пожалуйста, как сделать чтобы выводило конкретно то, что ищет пользователь. Если это ИТ - то только этот отдел и без всяких ИТКО. Заранее всем большое спасибо!!!

@Zazu · 16.05.2017, 10:40

JavaScript
1
2
3
4
5
6
7
8
$('#ldap-dep').change(function(){ 
    var filterN = $('#ldap-dep :selected').val(); 
    if (parseInt(filterN)>0) {
       $('table#ldap-data tr').hide();
       $('.class'+filterN).show();
    }
    else $('table#ldap-data tr').show();
});

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<select id="ldap-dep">
  <option val="0">Все отделы</option>
  <option val="1">ИТ</option>
  <option val="2">КЖ</option>
  <option val="3">Столовая</option>
  <option val="4">ИТКО</option>
</select>
<table id="ldap-data">
    <tr>
        <td id="dep" class="class1">ИТ</td>
    </tr>
    <tr>
        <td id="dep" class="class2">КЖ</td>
    </tr>
    <tr>
        <td id="dep" class="class3">Столовая</td>
    </tr>
    <tr>
        <td id="dep" class="class4">ИТКО</td>
    </tr>
</table>

@ember74 · 16.05.2017, 10:51 **[ТС]**

Zazu, Хм...не работает у меня

@Zazu · 16.05.2017, 12:02

ember74, Вот рабочий

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript">
$(document).ready(function() {
    $('select#ldap-dep').change(function(){ 
        var filterN = $('#ldap-dep :selected').val();
        if (parseInt(filterN)>0) {
           $('tr#tr').hide();
           $('.class'+filterN).show();
        }
        else $('tr#tr').show();
    });
});
</script>
 
<select id="ldap-dep">
  <option value="0">Все отделы</option>
  <option value="1">ИТ</option>
  <option value="2">КЖ</option>
  <option value="3">Столовая</option>
  <option value="4">ИТКО</option>
</select>
<table id="ldap-data">
    <tr id="tr" class="class1">
        <td>ИТ</td>
    </tr>
    <tr id="tr" class="class2">
        <td>КЖ</td>
    </tr>
    <tr id="tr" class="class3">
        <td>Столовая</td>
    </tr>
    <tr id="tr" class="class4">
        <td>ИТКО</td>
    </tr>
</table>

@ember74 · 16.05.2017, 12:11 **[ТС]**

Zazu, Работает) а можно как то без классов в <tr id="tr" class="class1">? Данных очень много и не все их нужно выгружать..

@Zazu · 16.05.2017, 12:43

ember74, можно только id убрать!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">
$(document).ready(function() {
    $('select#ldap-dep').change(function(){ 
        var filterN = $('#ldap-dep :selected').val();
        if (parseInt(filterN)>0) {
           $('#ldap-data tr').hide();
           $('.class'+filterN).show();
        }
        else $('#ldap-data tr').show();
    });
});
</script>
<select id="ldap-dep">
  <option value="0">Все отделы</option>
  <option value="1">ИТ</option>
  <option value="2">КЖ</option>
  <option value="3">Столовая</option>
  <option value="4">ИТКО</option>
</select>
<table id="ldap-data">
    <tr class="class1">
        <td>ИТ</td>
    </tr>
    <tr class="class2">
        <td>КЖ</td>
    </tr>
    <tr class="class3">
        <td>Столовая</td>
    </tr>
    <tr class="class4">
        <td>ИТКО</td>
    </tr>
</table>

Добавлено через 2 минуты
или использовать id вместо классов

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">
$(document).ready(function() {
    $('select#ldap-dep').change(function(){ 
        var filterN = $('#ldap-dep :selected').val();
        if (parseInt(filterN)>0) {
           $('#ldap-data tr').hide();
           $('#id'+filterN).show();
        }
        else $('#ldap-data tr').show();
    });
});
</script>
<select id="ldap-dep">
  <option value="0">Все отделы</option>
  <option value="1">ИТ</option>
  <option value="2">КЖ</option>
  <option value="3">Столовая</option>
  <option value="4">ИТКО</option>
</select>
<table id="ldap-data">
    <tr id="id1">
        <td>ИТ</td>
    </tr>
    <tr id="id2">
        <td>КЖ</td>
    </tr>
    <tr id="id3">
        <td>Столовая</td>
    </tr>
    <tr id="id4">
        <td>ИТКО</td>
    </tr>
</table>

@ember74 · 16.05.2017, 12:50 **[ТС]**

Zazu, вот смотрите, сотрудников в ИТ отделе может быть много) для примера, если я сейчас изменю таблицу на:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table id="ldap-data">
    <tr id="tr" class="class1">
        <td>ИТ</td><td>Иванов</td>
    </tr>
    <tr id="tr" class="class2">
        <td>КЖ</td><td>Сидоров</td>
    </tr>
    <tr id="tr" class="class3">
        <td>Столовая</td><td>Петрова</td>
    </tr>
    <tr id="tr" class="class4">
        <td>ИТКО</td><td>Инженеров</td>
    </tr>
    <tr id="tr" class="class5">
        <td>ИТ</td><td>Петров</td>
    </tr>
      <tr id="tr" class="class7">
        <td>КЖ</td><td>Максимов</td>
    </tr>
</table>

ваш код выведет только по одному отделу)

@Zazu · 16.05.2017, 13:00

ember74, поясните задачу пожалуйста!
Например про выборе ИТ в selecte что должно из того что ниже отображаться?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table id="ldap-data">
    <tr id="tr" class="class1">
        <td>ИТ</td><td>Иванов</td>
    </tr>
    <tr id="tr" class="class2">
        <td>КЖ</td><td>Сидоров</td>
    </tr>
    <tr id="tr" class="class3">
        <td>Столовая</td><td>Петрова</td>
    </tr>
    <tr id="tr" class="class4">
        <td>ИТКО</td><td>Инженеров</td>
    </tr>
    <tr id="tr" class="class5">
        <td>ИТ</td><td>Петров</td>
    </tr>
      <tr id="tr" class="class7">
        <td>КЖ</td><td>Максимов</td>
    </tr>
</table>

Добавлено через 37 секунд
Иванов и Петров?

@ember74 · 16.05.2017, 13:03 **[ТС]**

Zazu, Те кто работают в ИТ отделе

HTML5
1
2
3
4
5
6
7
8
<table id="ldap-data">
    <tr id="tr" class="class1">
        <td>ИТ</td><td>Иванов</td>
    </tr>
    <tr id="tr" class="class5">
        <td>ИТ</td><td>Петров</td>
    </tr>
</table>

В самом начале я написал, что мой скрипт работает, но выводит вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<table id="ldap-data">
    <tr id="tr" class="class1">
        <td>ИТ</td><td>Иванов</td>
    </tr>
    <tr id="tr" class="class4">
        <td>ИТКО</td><td>Инженеров</td>
    </tr>
    <tr id="tr" class="class5">
        <td>ИТ</td><td>Петров</td>
    </tr>
</table>

Т.е. он видит, что в ИТКО тоже содержится ИТ и выводит его..В этом то вся и проблема

@Zazu · 16.05.2017, 13:09

ember74, вот так нужно?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script type="text/javascript">
$(document).ready(function() {
    $('select#ldap-dep').change(function(){ 
        var filterN = $('#ldap-dep :selected').val();
        if (parseInt(filterN)>0) {
           $('#ldap-data tr').hide();
           $('tr#id'+filterN).show();
        }
        else $('#ldap-data tr').show();
    });
});
</script>
<select id="ldap-dep">
  <option value="0">Все отделы</option>
  <option value="1">ИТ</option>
  <option value="2">КЖ</option>
  <option value="3">Столовая</option>
  <option value="4">ИТКО</option>
</select>
<table id="ldap-data">
    <tr id="id1">
        <td>ИТ</td><td>Иванов</td>
    </tr>
    <tr id="id2">
        <td>КЖ</td><td>Петров</td>
    </tr>
    <tr id="id3">
        <td>Столовая</td><td>Сидоров</td>
    </tr>
    <tr id="id4">
        <td>ИТКО</td><td>Бякин</td>
    </tr>
    <tr id="id1">
        <td>ИТ</td><td>Уличко</td>
    </tr>
    <tr id="id2">
        <td>КЖ</td><td>Балванов</td>
    </tr>
    <tr id="id3">
        <td>Столовая</td><td>Милодян</td>
    </tr>
    <tr id="id4">
        <td>ИТКО</td><td>Галицин</td>
    </tr>
</table>

@ember74 · 16.05.2017, 13:13 **[ТС]**

Zazu, а если нет возможности добавить каждой конкретной строке конкретный id?)

@Zazu · 16.05.2017, 13:27

если есть возможность узнать ИТ или Столовая, то и есть возможность присвоить определённый id

Добавлено через 2 минуты
Может вам структуру стоит изменить

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table id="ldap-data">
    <tr id="id1">
        <td>ИТ</td><td>Иванов</td><td>Уличко</td>
    </tr>
    <tr id="id2">
        <td>КЖ</td><td>Петров</td><td>Балванов</td>
    </tr>
    <tr id="id3">
        <td>Столовая</td><td>Сидоров</td><td>Милодян</td>
    </tr>
    <tr id="id4">
        <td>ИТКО</td><td>Бякин</td><td>Галицин</td>
    </tr>
</table>

Добавлено через 7 минут
или вернуться к вашему первому варианту

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript">
$(document).ready(function() {
    $('#ldap-dep').change(function(){ 
        var filterN = $('#ldap-dep').val();
        $('#ldap-data tr').each(function () { 
            if(filterN == 'Все отделы') $(this).show();
            else {
                var n = $(this).find('#dep').text();
                if (n == filterN ) $(this).show();
                else $(this).hide();
            }
        });
    });
});
</script>
<select id="ldap-dep">
  <option>Все отделы</option>
  <option>ИТ</option>
  <option>КЖ</option>
  <option>Столовая</option>
  <option>ИТКО</option>
</select>
<table id="ldap-data">
    <tr>
        <td id="dep">ИТ</td>
    </tr>
    <tr>
        <td id="dep">КЖ</td>
    </tr>
    <tr>
        <td id="dep">Столовая</td>
    </tr>
    <tr>
        <td id="dep">ИТКО</td>
    </tr>
    <tr>
        <td id="dep">ИТ</td>
    </tr>
    <tr>
        <td id="dep">КЖ</td>
    </tr>
    <tr>
        <td id="dep">Столовая</td>
    </tr>
    <tr>
        <td id="dep">ИТКО</td>
    </tr>
    <tr>
        <td id="dep">ИТ</td>
    </tr>
    <tr>
        <td id="dep">КЖ</td>
    </tr>
    <tr>
        <td id="dep">Столовая</td>
    </tr>
    <tr>
        <td id="dep">ИТКО</td>
    </tr>
</table>

@ember74 · 16.05.2017, 13:31 **[ТС]**

Zazu, структуру нельзя менять..если задавать строке с конкретным отделом свой id - это значительно увеличит объем кода из-за проверок (отделом больше 30), что тоже недопустимо

@Zazu · 16.05.2017, 13:35

ember74, тогда последний пример вам нужен, вот

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript">
$(document).ready(function() {
    $('#ldap-dep').change(function(){ 
        var filterN = $('#ldap-dep').val();
        $('#ldap-data tr').each(function () { 
            if(filterN == 'Все отделы') $(this).show();
            else {
                var n = $(this).find('#dep').html();
                if (n == filterN ) $(this).show();
                else $(this).hide();
            }
        });
    });
});
</script>
<select id="ldap-dep">
  <option>Все отделы</option>
  <option>ИТ</option>
  <option>КЖ</option>
  <option>Столовая</option>
  <option>ИТКО</option>
</select>
<table id="ldap-data">
    <tr>
        <td id="dep">ИТ</td>
    </tr>
    <tr>
        <td id="dep">КЖ</td>
    </tr>
    <tr>
        <td id="dep">Столовая</td>
    </tr>
    <tr>
        <td id="dep">ИТКО</td>
    </tr>
    <tr>
        <td id="dep">ИТ</td>
    </tr>
    <tr>
        <td id="dep">КЖ</td>
    </tr>
    <tr>
        <td id="dep">Столовая</td>
    </tr>
    <tr>
        <td id="dep">ИТКО</td>
    </tr>
    <tr>
        <td id="dep">ИТ</td>
    </tr>
    <tr>
        <td id="dep">КЖ</td>
    </tr>
    <tr>
        <td id="dep">Столовая</td>
    </tr>
    <tr>
        <td id="dep">ИТКО</td>
    </tr>
</table>

@ember74 · 16.05.2017, 13:37 **[ТС]**

Zazu, благодарю)

@Zazu · 16.05.2017, 13:41

и кстати

Сообщение от ember74

это значительно увеличит объем

ни чего не изменится, так как скрипт php выполняется лишь на стороне сервера, а к узеру придут готовые данные,
просто вместо этого

HTML5
1
2
3
    <tr>
        <td id="dep">Столовая</td>
    </tr>

будет это

HTML5
1
2
3
    <tr id="id1">
        <td>Столовая</td>
    </tr>

@sad67man · 16.05.2017, 13:54

JavaScript
1
2
3
4
5
6
7
8
9
$('#ldap-dep').change(function() {
  var filterN = this.value;
 
  $('#ldap-data tr').each(function() {
    $(this).toggle(
      filterN == 'Все отделы' || filterN == $(this).find('#dep').text()
    );
  })
});

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@ember74 9 / 8 / 2 Регистрация: 07.10.2015 Сообщений: 510
	16.05.2017, 10:51 [ТС]
	Zazu, Хм...не работает у меня 0

@ember74 9 / 8 / 2 Регистрация: 07.10.2015 Сообщений: 510
	16.05.2017, 12:11 [ТС]
	Zazu, Работает) а можно как то без классов в <tr id="tr" class="class1">? Данных очень много и не все их нужно выгружать.. 0

@ember74 9 / 8 / 2 Регистрация: 07.10.2015 Сообщений: 510
	16.05.2017, 13:13 [ТС]
	Zazu, а если нет возможности добавить каждой конкретной строке конкретный id?) 0

@ember74 9 / 8 / 2 Регистрация: 07.10.2015 Сообщений: 510
	16.05.2017, 13:31 [ТС]
	Zazu, структуру нельзя менять..если задавать строке с конкретным отделом свой id - это значительно увеличит объем кода из-за проверок (отделом больше 30), что тоже недопустимо 0

@ember74 9 / 8 / 2 Регистрация: 07.10.2015 Сообщений: 510
	16.05.2017, 13:37 [ТС]
	Zazu, благодарю) 0

Простенький фильтр значений по таблице

Решение