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

Похожие записи

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

TypeScript Enum Flags (bitmask)

enum FileAccess {
    None,             // 000
    Read    = 1 << 1, // 001
    Write   = 1 << 2, // 010
    Execute = 1 << 3, // 100
    ReadWrite  = Read | Write, // 011
}

const f = FileAccess.Read | FileAccess.Execute;
f & FileAccess.Execute // true

JS. Get query param

function getQueryParam(item) {
  var svalue = window.location.search.match(new RegExp('[\?\&]' + item + '=([^\&]*)(\&?)', 'i'));
  return svalue ? svalue[1] : svalue;
}

// /foo/bar/baz.html?lang=ru
var lang = getQueryParam('lang') || 'en';