JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="containerSearch">
<input type="text" id="searchTabela" placeholder="Search" data-table="resultsTable" />
<button class="iconSearch"><i class="fa fa-search"></i>
</button>
</div>
<table id="tabelaProgramas" class="table table-hover text-center resultsTable" style="width: 100%">
<thead>
<tr>
<th class="text-center">Top</th>
<th class="text-center"></th>
<th class="text-center">Program</th>
<th class="text-center">Start</th>
<th class="text-center">Length</th>
<th class="text-center">Rat%</th>
<th class="text-center">Shr%</th>
<th class="text-center">Rch%</th>
</tr>
<tr class="warning no-result text-center">
<td colspan="8"><i class="fa fa-warning"></i>Sem resultados obtidos!</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="img/logo_tvi.png" class="img-responsive" style="margin: 0 auto;" />
</td>
<td>Jornal das 8</td>
<td><i class="fa fa-clock-o icontabelaProgramas" style="color: #8EC127;"></i>19:56:02</td>
<td><i class="fa fa-arrows-h icontabelaProgramas"></i>01:47:57</td>
<td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>13.4</td>
<td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>28.8</td>
<td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>29.4</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="img/logo_rtp1.png" class="img-responsive" style="margin: 0 auto;" />
</td>
<td>Jornal das 8</td>
<td><i...
JavaScript
var $linhas = $('#tabelaProgramas tr');
var tabela = $('#tabelaProgramas tr').map(function (i, tr) {
return {
el: tr,
conteudo: $(tr).text()
}
}).get();
$('#searchTabela').on('keyup', function (e) {
var searchString = this.value;
var linhas = tabela.filter(function (tr) {
return tr.conteudo.indexOf(searchString) != -1;
}).map(function (l) {
return l.el;
});
$linhas.hide();
$(linhas).show();
});