Table Search JS or jQuery

Question

I want to do a search code using a Regex for strings, and normal numbers, and that I use the columns and rows of the table.

I’ve tried several hypotheses, but none of them make that "refresh" of going back to the beginning when I delete the word or number you’re looking for.

I leave a small print / code:

The Code is this:

 <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 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>3</td>
                                            <td>
                                                <img src="img/logo_rtp2.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>

                                        //Os outros tr's são iguas, são um exemplo

                                    </tbody>
                                </table>
                            </div>

I know there are jQuery plug-ins, but I would like to practice the logic and for that I ask for your help. I’ve seen some code, some made sense to me, only they don’t apply well and that’s where I get even more confused. Someone can help?

Answer 1

Create an object with the data from this table to speed up processing later. At my suggestion I created an array of objects. Each object has the element tr and the contents of that line.

var $linhas = $('#tabelaProgramas tr');
var tabela = $('#tabelaProgramas tr').map(function (i, tr) {
    return {
        el: tr,
        conteudo: $(tr).text()
    }
}).get();

Then in the keyup you can go through this array and show only the elements that have text and are common to what was requested in the input:

$('#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();
});

Example: https://jsfiddle.net/h6onh7gm/