Поисковик по определённым столбцам таблицы

@noiws · Регистрация: 26.06.2016

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

Нужен поиск по таблице в конкретном столбце, например пишу в input: Иванов, остаётся только строка c Ивановым, остальные убираются

Вот данный код работает, но с select, как его можно модернизировать под поиск?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function()
    {
 
    $('#last-name').change(function() {
        var curr = $(this).val();
        $("#dataTable td.lastname").each(function(){
            if(curr.indexOf($(this).text().substr(0,1)) != -1){
                 $(this).parent().show();
 
            }else{
            $(this).parent().hide();
            }
        });
 
        });
        }
 
);

@Kraken73 · 05.07.2016, 15:39

Как то так

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
<select id="last-name">
  <option>Петров</option>
  <option>Иванов</option>
  <option>Кукушкин</option>
</select>
<input type="text" class="searchInput">
<a id="search">Найти</a>
<table id="dataTable" border="1px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="lastname">Иванов</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td class="lastname">Петров</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td class="lastname">Кукушкин</td>
  </tr>
</table>

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
function search(curr) {
  $("#dataTable td.lastname").each(function() {
    var el = $(this).text();
    if (~el.indexOf(curr)) {
      $(this).parent().show();
    } else {
      $(this).parent().hide();
    }
  })
}
$(document).ready(function() {
  $('#search').click(function() {  
    $('#last-name').get(0).selectedIndex = 0; 
    var curr = $(".searchInput").val();
    search(curr);
  });
  
   $('#last-name').change(function() {
    $(".searchInput").val("");
    var curr = $(this).val();
    if (curr != 0) {
      search(curr);
    } else {
      $("#dataTable tr").show();
      return false;
    }
  });
  
});

@noiws · 05.07.2016, 16:33 **[ТС]**

Спасибо, это работает. Но вот еще, как сделать, чтобы поиск был не регистрозависимый и при вводе Иванов поиск искал с начала строки, а то в результате, получается вот так, как на скриншоте

Так я модифицировал ваше решение

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function search(curr) {
  $("#dataTable td.fio").each(function() {
    var el = $(this).text();
    if (~el.indexOf(curr)) {
      $(this).parent().show();
    } else {
      $(this).parent().hide();
    }
  })
}
 
function search2(curr) {
  $("#dataTable td.specialnost").each(function() {
    var el = $(this).text();
    if (~el.indexOf(curr)) {
      $(this).parent().show();
    } else {
      $(this).parent().hide();
    }
  })
}
 
 
$(document).ready(function() {
 
 $('#filter-input').on('keyup', function() {
 
    var curr = $("#filter-input").val();
    if (curr != 0) {
      search(curr);
    } else {
      $("#dataTable tr").show();
      return false;
    }
  });
 
 
   $('#select').change(function() {
    var curr = $(this).val();
    if (curr != 0) {
      search2(curr);
    } else {
      $("#dataTable tr").show();
      return false;
    }
  });
 
});

@Kraken73 · 05.07.2016, 16:53

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

чтобы поиск был не регистрозависимый

приводите к общему регистру toLowerCase() или toUpperCase().

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

при вводе Иванов поиск искал с начала строки

split'ом разбить строку. Но важно чтобы фамилия шла на одной позиции всегда(например 1)
вот пример

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
<select id="last-name">
    <option value="0">Выберите</option>
    <option>Директор</option>
    <option>Бухгалтер</option>
    <option>Сторож</option>
</select>
<input type="text" class="searchInput">
<table id="dataTable" border="1px">
    <tr>
        <td class="specialnost">Директор</td>
        <td>2</td>
        <td>3</td>
        <td class="fio">Иванов Иван Петрович</td>
    </tr>
    <tr>
        <td class="specialnost">Сторож</td>
        <td>6</td>
        <td>7</td>
        <td class="fio">Петров Иван Иванович</td>
    </tr>
    <tr>
        <td class="specialnost">Бухгалтер</td>
        <td>10</td>
        <td>11</td>
        <td class="fio">Кукушкин Иван Петрович</td>
    </tr>
</table>

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
function search(curr, filter) {
    $("#" + filter).each(function() {
        var el = $(this).text().toLowerCase();
        el = el.split(' ');
        if (~el[0].indexOf(curr.toLowerCase())) {
            $(this).parent().show();
        } else {
            $(this).parent().hide();
        }
    })
}
$(document).ready(function() {
    $('.searchInput').keyup(function() {
        $('#last-name').get(0).selectedIndex = 0;
        var curr = $(".searchInput").val();
        search(curr, "dataTable td.fio");
    });
    $('#last-name').change(function() {
        $(".searchInput").val("");
        var curr = $(this).val();
        if (curr != 0) {
            search(curr, "dataTable td.specialnost");
        } else {
            $("#dataTable tr").show();
            return false;
        }
    });
});

CSS
1
2
3
4
5
6
7
8
9
td {
    text-align: center;
    width: 100px;
    height: 30px;
}
 
a {
    cursor: pointer;
}

Комментарий модератора

По пункту правил 4.11, все коды должны лежать на форуме. Ссылки на песочницы - только дополнение к коду

@noiws · 05.07.2016, 18:48 **[ТС]**

******73, спасибо огромное

P.S. рад, что есть хорошие люди

Добавлено через 31 минуту
******73, есть проблема

В специальности, если есть пробел, я так понимаю между двумя словами, то не работает select. Подскажите в чём проблема?

@Kraken73 · 05.07.2016, 19:32

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

если есть пробел, я так понимаю между двумя словами, то не работает select

Ну можно еще 1 параметр передать в функцию, и дописать её
Что дописать

JavaScript
1
2
3
4
5
6
7
function search(curr, filter, type)
...
var el = $(this).text().toLowerCase();
 if (type=="fio") {
          el = el.split(' ');
        el = el[0];
    }

И в вызове передавать если хотим только по-первому слову

JavaScript
1
search(curr, "dataTable td.fio", "fio");

или если по всей фразе, то просто не передавать 3-ий аргумент

JavaScript
1
search(curr, "dataTable td.specialnost");

@noiws · 05.07.2016, 19:54 **[ТС]**

Спасибо)

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@noiws 0 / 0 / 0 Регистрация: 26.06.2016 Сообщений: 32
	05.07.2016, 18:48 [ТС]
	*****73, спасибо огромное P.S. рад, что есть хорошие люди Добавлено через 31 минуту* ******73, есть проблема В специальности, если есть пробел, я так понимаю между двумя словами, то не работает select. Подскажите в чём проблема? 0

@noiws 0 / 0 / 0 Регистрация: 26.06.2016 Сообщений: 32
	05.07.2016, 19:54 [ТС]
	Спасибо) 0