Как сделать поиск по таблице?

Чтобы реализовать поиск по таблице в JavaScript, необходимо использовать несколько шагов. Давайте рассмотрим, как это можно сделать.

1. Создайте HTML-код для таблицы. В таблице должны быть заголовки столбцов и строки с данными. Каждая строка должна иметь уникальный идентификатор.

<table id="myTable">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Возраст</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td>Иван</td>
      <td>Иванов</td>
      <td>25</td>
    </tr>
    <tr id="2">
      <td>Петр</td>
      <td>Петров</td>
      <td>30</td>
    </tr>
    <tr id="3">
      <td>Алексей</td>
      <td>Алексеев</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

2. Создайте функцию JavaScript, которая будет выполнять поиск по таблице. В этой функции вы будете сравнивать введенное пользователем значение со значениями в каждой ячейке таблицы.

function searchTable() {
  // Получить введенное пользователем значение
  var input = document.getElementById("searchInput").value.toUpperCase();

  // Получить таблицу и строки с данными
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");

  // Пройти по каждой строке и скрыть те, которые не соответствуют поисковому запросу
  for (var i = 0; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");
    var match = false;

    for (var j = 0; j < cells.length; j++) {
      var cellText = cells[j].textContent || cells[j].innerText;

      if (cellText.toUpperCase().indexOf(input) > -1) {
        match = true;
        break;
      }
    }

    // Отобразить или скрыть строку в зависимости от соответствия поисковому запросу
    if (match) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

3. Добавьте поле ввода для поиска и кнопку поиска на страницу.

<input type="text" id="searchInput" placeholder="Поиск..." onkeyup="searchTable()">

4. Вызовите функцию searchTable() при загрузке страницы, чтобы отобразить все строки таблицы.

window.onload = function() {
  searchTable();
};

Теперь, когда пользователь вводит текст в поле ввода и нажимает Enter или изменяет значение поля, таблица будет автоматически обновляться, скрывая строки, которые не соответствуют поисковому запросу, и отображая только те строки, которые совпадают с запросом.

Это лишь один из множества способов реализации поиска в таблице с использованием JavaScript. В зависимости от ваших требований и экосистемы вашего проекта, возможно, потребуется внести определенные изменения или дополнения в код.