23 ноября 2022, 00:49
83
Живой поиск и фильтрация данных по таблице 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;
}
Комментарии ()