Javascript поиск/фильтр по таблице
Живой поиск по всем ячейкам таблицы на чистом Javascript В примере используются классы CSS фреймворка Boostrap
.
Допустим имеется таблица с идентификатором info-table
и поле ввода с идентификатором search-text
.
<input class="form-control" type="text" placeholder="Фамилия или телефон" id="search-text" onkeyup="tableSearch()">
<table class="table table-striped" id="info-table">
<thead>
<tr>
<th>Фамилия</th>
<th>Телефон</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Тогда полю ввода необходимо добавить обработчик на событие onkeyup
со следующей функции tableSearch
.
function tableSearch() {
var phrase = document.getElementById('search-text');
var table = document.getElementById('info-table');
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";
}
}
}
Пример таблицы с поиском
Фамилия | Телефон |
---|---|
Иванов | 511246 |
Петров | 511751 |
Сидоров | 511951 |
Медведев | 512456 |
Николаев | 512781 |