Table Search JS or jQuery

Navigation
1

I'm wanting to make a search code using a RegEx for strings, and for normal numbers, and for the columns and rows of the table.

I have tried a lot of different hypotheses, but none of them do that "refresh" back to the beginning when I delete the word or number that you are looking for.

I leave a small print / code:

Thecodeisthis:

<divclass="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 like to practice logic and for this I ask you for help. I've seen some code, some have made sense, but they do not apply well and that's where I am even more confused. Can anyone help?

    
asked by anonymous 12.03.2015 / 16:52

1 answer

1

Create an object with the data in 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 keyup you can go through this array and show only the elements that have text and common with 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: link

    
12.03.2015 / 17:18
Error uploading image in CodeIgniter PHP Change text in OpenOffice xml with XMLReader and XMLWriter