Hide or display HTML table row with Jquery

Navigation
0

I have a SELECT like this: 

<select id="filtro-uf" name="filtro-uf" class="form-control">
    <option value=" ">Selecione</option>
    <option value='AC'>Acre (AC)</option>
    <option value='AL'>Alagoas (AL)</option>
    <option value='AP'>Amapá (AP)</option>
    <option value='AM'>Amazonas (AM)</option>
    <option value='BA'>Bahia (BA)</option>
    <option value='CE'>Ceará (CE)</option>
    <option value='DF'>Distrito Federal (DF)</option>
    <option value='ES'>Espírito Santo (ES)</option>
    <option value='GO'>Goiás (GO)</option>
    <option value='MA'>Maranhão (MA)</option>
    <option value='MT'>Mato Grosso (MT)</option>
    <option value='MS'>Mato Grosso do Sul (MS)</option>
    <option value='MG'>Minas Gerais (MG)</option>
    <option value='PA'>Pará (PA)</option>
    <option value='PB'>Paraíba (PB)</option>
    <option value='PR'>Paraná (PR)</option>
    <option value='PE'>Pernambuco (PE)</option>
    <option value='PI'>Piauí (PI)</option>
    <option value='RJ'>Rio de Janeiro (RJ)</option>
    <option value='RN'>Rio Grande do Norte (RN)</option>
    <option value='RS'>Rio Grande do Sul (RS)</option>
    <option value='RO'>Rondônia (RO)</option>
    <option value='RR'>Roraima (RR)</option>
    <option value='SC'>Santa Catarina (SC)</option>
    <option value='SP'>São Paulo (SP)</option>
    <option value='SE'>Sergipe (SE)</option>
    <option value='TO'>Tocantins (TO)</option>
</select>

And my table looks like this, in summary: 

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <td>Razão social</td>
                        <td>Responsável</td>
                        <td>Cidade/UF</td>
                    </tr>
                </thead>
                <tbody>
                    <tr data-uf="SP">
                        <td>Razão social 01</td>
                        <td>Nome do responsável 01</td>
                        <td>São Paulo/SP</td>
                    </tr>
                    <tr data-uf="RJ">
                        <td>Razão social 02</td>
                        <td>Nome do responsável 02</td>
                        <td>Niterói/RJ</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 03</td>
                        <td>Nome do responsável 03</td>
                        <td>Porto Alegre/RS</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 04</td>
                        <td>Nome do responsável 04</td>
                        <td>Petolas/RS</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

I would like to hide the rows of the table with the date-uf="UF" equal to the UF of the VALUE of SELECT, when selecting the State, and when selecting the first option that is value "" with label "Select" Jquery would undo the hidden lines. I know how to do with a request for $ .load () and $ .ajax () but it's making the process time-consuming, and I thought it would be agile and manipulate only the DOM without a backend request. Thanks!

    
asked by anonymous 13.04.2018 / 17:45

4 answers

0

Selecting a select item will hide the row of the table that has the same data-uf . If I misunderstand your question, let me know if I change my answer. 

$(document).ready(function() {
  $('select').on('change', function() {
    $('table').find('tr').show();
    $('table').find("tr[data-uf=" + $(this).val() + "]").hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="filtro-uf" name="filtro-uf" class="form-control">
    <option value=" ">Selecione</option>
    <option value='AC'>Acre (AC)</option>
    <option value='AL'>Alagoas (AL)</option>
    <option value='AP'>Amapá (AP)</option>
    <option value='AM'>Amazonas (AM)</option>
    <option value='BA'>Bahia (BA)</option>
    <option value='CE'>Ceará (CE)</option>
    <option value='DF'>Distrito Federal (DF)</option>
    <option value='ES'>Espírito Santo (ES)</option>
    <option value='GO'>Goiás (GO)</option>
    <option value='MA'>Maranhão (MA)</option>
    <option value='MT'>Mato Grosso (MT)</option>
    <option value='MS'>Mato Grosso do Sul (MS)</option>
    <option value='MG'>Minas Gerais (MG)</option>
    <option value='PA'>Pará (PA)</option>
    <option value='PB'>Paraíba (PB)</option>
    <option value='PR'>Paraná (PR)</option>
    <option value='PE'>Pernambuco (PE)</option>
    <option value='PI'>Piauí (PI)</option>
    <option value='RJ'>Rio de Janeiro (RJ)</option>
    <option value='RN'>Rio Grande do Norte (RN)</option>
    <option value='RS'>Rio Grande do Sul (RS)</option>
    <option value='RO'>Rondônia (RO)</option>
    <option value='RR'>Roraima (RR)</option>
    <option value='SC'>Santa Catarina (SC)</option>
    <option value='SP'>São Paulo (SP)</option>
    <option value='SE'>Sergipe (SE)</option>
    <option value='TO'>Tocantins (TO)</option>
</select>

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <td>Razão social</td>
                        <td>Responsável</td>
                        <td>Cidade/UF</td>
                    </tr>
                </thead>
                <tbody>
                    <tr data-uf="SP">
                        <td>Razão social 01</td>
                        <td>Nome do responsável 01</td>
                        <td>São Paulo/SP</td>
                    </tr>
                    <tr data-uf="RJ">
                        <td>Razão social 02</td>
                        <td>Nome do responsável 02</td>
                        <td>Niterói/RJ</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 03</td>
                        <td>Nome do responsável 03</td>
                        <td>Porto Alegre/RS</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 04</td>
                        <td>Nome do responsável 04</td>
                        <td>Petolas/RS</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    
13.04.2018 / 17:56
1

    
$('#filtro-uf').change(function(el){
    let table = $('.table') ;
    let tableels = $('.table tr');
    let find = "[data-uf='" +  this.value + "']";
    
    el = table.find(find);
    el.hide();
    
    for (let index = 0; index < tableels.length; index++) {

        let element = tableels[index];

        let attr = element.getAttribute("data-uf");
        
        if(attr !=  this.value ){
         element.style.display = "block";
        }
        
    }

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="filtro-uf" name="filtro-uf" class="form-control">
    <option value=" ">Selecione</option>
    <option value='AC'>Acre (AC)</option>
    <option value='AL'>Alagoas (AL)</option>
    <option value='AP'>Amapá (AP)</option>
    <option value='AM'>Amazonas (AM)</option>
    <option value='BA'>Bahia (BA)</option>
    <option value='CE'>Ceará (CE)</option>
    <option value='DF'>Distrito Federal (DF)</option>
    <option value='ES'>Espírito Santo (ES)</option>
    <option value='GO'>Goiás (GO)</option>
    <option value='MA'>Maranhão (MA)</option>
    <option value='MT'>Mato Grosso (MT)</option>
    <option value='MS'>Mato Grosso do Sul (MS)</option>
    <option value='MG'>Minas Gerais (MG)</option>
    <option value='PA'>Pará (PA)</option>
    <option value='PB'>Paraíba (PB)</option>
    <option value='PR'>Paraná (PR)</option>
    <option value='PE'>Pernambuco (PE)</option>
    <option value='PI'>Piauí (PI)</option>
    <option value='RJ'>Rio de Janeiro (RJ)</option>
    <option value='RN'>Rio Grande do Norte (RN)</option>
    <option value='RS'>Rio Grande do Sul (RS)</option>
    <option value='RO'>Rondônia (RO)</option>
    <option value='RR'>Roraima (RR)</option>
    <option value='SC'>Santa Catarina (SC)</option>
    <option value='SP'>São Paulo (SP)</option>
    <option value='SE'>Sergipe (SE)</option>
    <option value='TO'>Tocantins (TO)</option>
</select>
<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <td>Razão social</td>
                        <td>Responsável</td>
                        <td>Cidade/UF</td>
                    </tr>
                </thead>
                <tbody>
                    <tr data-uf="SP">
                        <td>Razão social 01</td>
                        <td>Nome do responsável 01</td>
                        <td>São Paulo/SP</td>
                    </tr>
                    <tr data-uf="RJ">
                        <td>Razão social 02</td>
                        <td>Nome do responsável 02</td>
                        <td>Niterói/RJ</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 03</td>
                        <td>Nome do responsável 03</td>
                        <td>Porto Alegre/RS</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 04</td>
                        <td>Nome do responsável 04</td>
                        <td>Petolas/RS</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    
13.04.2018 / 17:59
1

Would that be what you want to do? 

$('#filtro-uf').change(function() {
        var estado = $('#filtro-uf').val();
        if (estado == ""){
          	$('tr').show();
        }
        else {
            $('tr').show();
            $('tr[data-uf='+estado+']').hide();
        }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="filtro-uf" name="filtro-uf" class="form-control">
    <option value="">Selecione</option>
    <option value='AC'>Acre (AC)</option>
    <option value='AL'>Alagoas (AL)</option>
    <option value='AP'>Amapá (AP)</option>
    <option value='AM'>Amazonas (AM)</option>
    <option value='BA'>Bahia (BA)</option>
    <option value='CE'>Ceará (CE)</option>
    <option value='DF'>Distrito Federal (DF)</option>
    <option value='ES'>Espírito Santo (ES)</option>
    <option value='GO'>Goiás (GO)</option>
    <option value='MA'>Maranhão (MA)</option>
    <option value='MT'>Mato Grosso (MT)</option>
    <option value='MS'>Mato Grosso do Sul (MS)</option>
    <option value='MG'>Minas Gerais (MG)</option>
    <option value='PA'>Pará (PA)</option>
    <option value='PB'>Paraíba (PB)</option>
    <option value='PR'>Paraná (PR)</option>
    <option value='PE'>Pernambuco (PE)</option>
    <option value='PI'>Piauí (PI)</option>
    <option value='RJ'>Rio de Janeiro (RJ)</option>
    <option value='RN'>Rio Grande do Norte (RN)</option>
    <option value='RS'>Rio Grande do Sul (RS)</option>
    <option value='RO'>Rondônia (RO)</option>
    <option value='RR'>Roraima (RR)</option>
    <option value='SC'>Santa Catarina (SC)</option>
    <option value='SP'>São Paulo (SP)</option>
    <option value='SE'>Sergipe (SE)</option>
    <option value='TO'>Tocantins (TO)</option>
</select>

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <td>Razão social</td>
                        <td>Responsável</td>
                        <td>Cidade/UF</td>
                    </tr>
                </thead>
                <tbody>
                    <tr data-uf="SP">
                        <td>Razão social 01</td>
                        <td>Nome do responsável 01</td>
                        <td>São Paulo/SP</td>
                    </tr>
                    <tr data-uf="RJ">
                        <td>Razão social 02</td>
                        <td>Nome do responsável 02</td>
                        <td>Niterói/RJ</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 03</td>
                        <td>Nome do responsável 03</td>
                        <td>Porto Alegre/RS</td>
                    </tr>
                    <tr data-uf="RS">
                        <td>Razão social 04</td>
                        <td>Nome do responsável 04</td>
                        <td>Petolas/RS</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
    
13.04.2018 / 18:01
0

Well, it may not be the best practice for this, but I solved it as follows by making use of .hide (); Is show(); with conditions. 

<script>
$(document).ready(function (){
    $("#filtro-uf").on('change', function(){

        var uf = $(this).val();

        if ( uf.length == 2 ) {

            $("table.table tbody tr").show();

            if ( uf != $("table.table tbody tr[data-uf='" + uf + "']") ) {

                $("table.table tbody tr").hide();

                $("table.table tbody tr[data-uf='" + uf + "']").show();

            }

        } else {

            $("table.table tbody tr").show();

        }

    })
});
</script>
    
13.04.2018 / 17:56
Hide div on specific pages with jquery [closed] Error during commit in git