Hide or display HTML table line with Jquery

Asked

Viewed 1,294 times

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 chart looks like this, in short:

<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 SELECT VALUE, when selecting the Status, and when selecting the first option that is value " ", with label "Select", Jquery would undo the hidden lines. I can do it with a request for $.load() and $.ajax() but it’s taking a long time, and I thought that way it would be agile and only manipulate the DOM without the back-end request. Thank you!

html jquery

4 answers

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>
<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>
<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>

  • Your code does not re-display the hidden lines and did not resolve the issue

  • Oops. I edited the answer. Check if it works ;)

1

Would that be what you wish 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>

<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>

<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>

  • 1

    @Eliseu B. Check if in this case meets what you need.

  • Opa amigo! blz? Just a curiosity: what does this operator mean |=?

  • 1

    @dvd It was actually a typo, there is no such thing | in the code.

0


When selecting an item from select it will hide the table row that has the same data-uf. If I misunderstood your question, let me know that 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>
<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>

<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>

  • Your code does not re-display the hidden lines and did not resolve the issue.

  • How not? Before hiding the lines with the same Uf-date, I show them all again.

  • I get it now. Thank you.

0

Well, it may not be the best practice for this, but I resolved it as follows by making use of . Hide(); and . 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>

  • Check in my reply, I put a functional code for your need and much leaner.

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.