JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<h2>Пример таблицы с поиском</h2>
<input class=form-control id=search-text onkeyup=tableSearch() placeholder="Фамилия или телефон" type=text><
<table class="table table-striped" id="info-table">
<thead>
 <tr>
 <th>Фамилия</th> 
  <th>Телефон</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th>ОДин</th>
    <th>два</th>
  </tr>
  <tr>
    <th>про</th>
    <th>два</th>
  </tr>
  <tr>
    <th>про</th>
    <th>два</th>
  </tr>
  </tbody>
  </table>

JavaScript

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";
        }

    }
}