23 ноября 2022, 00:49
 296

Живой поиск и фильтрация данных по таблице JS jQuery

Фильтрация и поиск данных по таблице table путем ввода в поле input.

Вводя в поле input ключевые данные Фамилии или Телефона и поиск сразу налету скрывает неподходящие результаты, оставляя только подходящие. Так получается живой поиск фильтрация.

Но так же можно сделать поиск не по таблице, а просто поиск по списку.

Фамилия Телефон
Иванов 511246
Петров 411751
Сидоров 611951
Медведев 112781
Николаев 332781
Алексеев 671951
<input type="text" id="search" onkeyup="tableSearch()" placeholder="Фамилия или телефон"/>
<table id="table-data">
  <thead>
    <tr>
      <th>Фамилия</th>
      <th>Телефон</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иванов</td>
      <td>511246</td>
    </tr>
    <tr>
      <td>Петров</td>
      <td>411751</td>
    </tr>
    <tr>
      <td>Сидоров</td>
      <td>611951</td>
    </tr>
    <tr>
      <td>Медведев</td>
      <td>112781</td>
    </tr>
    <tr>
      <td>Николаев</td>
      <td>332781</td>
    </tr>
    <tr>
      <td>Алексеев</td>
      <td>671951</td>
    </tr>
  </tbody>
</table>
function tableSearch() {
  var phrase = document.getElementById('search');
  var table = document.getElementById('table-data');
  var regPhrase = new RegExp(phrase.value, 'i');
  var flag = false;
  for (var i = 1; i < table.rows.length; i++) {
    flag = false;
    for (var j = table.rows[i].cells.length - 1; j >= 0; j--) {
      flag = regPhrase.test(table.rows[i].cells[j].innerHTML);
      if (flag) break;
    }
    if (flag) {
      table.rows[i].style.display = "";
    } else {
      table.rows[i].style.display = "none";
    }

  }
}
table {
  margin-top: 10px;
}
th, td {
  min-width: 100px;
  border: 1px solid #d4d4d4;
  padding: 3px 5px;
}
Работаем с TimeWeb
Все наши проекты на хостинге TimeWeb - проверено временем.
  • Виртуальный хостинг - от 196 ₽ в месяц
  • Аренда VDS и VPS - от 169 ₽ в месяц
  • Выделенные серверы - от 4 941 ₽ в месяц
  • Конструктор сайтов - 159 ₽ в месяц
  • Быстрый хостинг
  • Облачные серверы
  • Цена + качество
  • Поддержка 24/7
  • Надежные дата-центры
  • Своя панель управления
  • Бесперебойная работа

23 ноября 2022, 00:49    Сергей Глазунов Блог 0    297 0

Комментарии ()