1

Tenho um tabela com várias entradas, gostaria de através do select selecionar um tipo de dado e aparecer somente aqueles dados selecionados.

<select>
    <option selected>Escolher...</option>
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<table>
  <tr>
    <th>id</th>
    <th>categoria</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
    <tr>
    <td>2</td>
    <td>B</td>
  </tr>
</table>

4
  • Você quer que, quando seja selecionado "A" no select só apareça a linha "1 A" na tabela, e quando seja selecionado "B" no select só apareça a linha "2 B" na tabela, é isso? Commented 24/10/2018 às 1:22
  • @PedroGaspar exatamente isso, mas em meu projeto irá ter várias linhas. Commented 24/10/2018 às 1:34
  • Mas você quer montar a tabela dinamicamente só com os dados referentes ao valor que foi selecionado, ou todos os dados já estarão na tabela e você quer apenas mostrar as linhas que interessam e esconder as que não interessam? Commented 24/10/2018 às 1:45
  • @PedroGaspar mostrar somente as linhas que interessam e esconder as outras. Commented 24/10/2018 às 1:46

1 Resposta 1

7

Você pode usar addEventListener('change', ...) e definir uma função que será chamada sempre que o select for alterado.

Nesta função, basta pegar o valor selecionado no select e fazer um loop nas linhas da tabela, comparando os valores com a opção escolhida.

Em seguida basta mudar a propriedade display de cada linha com o valor table-row quando esta deve ser mostrada, ou none quando esta deve ser escondida.

No exemplo abaixo estou supondo que você quer comparar tanto o valor da opção selecionada (1 ou 2, no caso) quanto o respectivo texto ("A" ou "B").

document.querySelector('#opcoes')
  .addEventListener('change', // quando o select for alterado, chamar a função abaixo
    function() {
      // opção selecionada
      let opcao = this.options[this.selectedIndex];

      // verificar as células da tabela que possuem o valor selecionado
      let tabela = document.querySelector('#tabela');
      // começar em 1 para ignorar a primeira linha (cabeçalhos estão na linha zero)
      for (let i = 1, row; row = tabela.rows[i]; i++) {
        let valor = row.cells[0].innerHTML; // neste exemplo, valor é 1 ou 2
        let texto = row.cells[1].innerHTML; // "A" ou "B"
        if (opcao.value === valor && opcao.text === texto) {
          row.style.display = 'table-row';
        } else {
          row.style.display = 'none';
        }
      }
    }
  )
<select id="opcoes">
    <option selected>Escolher...</option>
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<table id="tabela">
  <tr>
    <th>id</th>
    <th>categoria</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
</table>


No exemplo acima, caso você mude o select para "A" ou "B", as respectivas linhas serão mostradas (e as demais escondidas). Em seguida, se você selecionar a opção "Escolher...", nenhuma linha será mostrada (exceto o cabeçalho), afinal, nenhuma das linhas da tabela corresponde a esta opção.

Caso queira que todas as linhas sejam mostradas ao selecionar a opção "Escolher..." (voltando assim ao estado inicial do select), basta adicionar mais esta condição ao código:

document.querySelector('#opcoes')
  .addEventListener('change', // quando o select for alterado, chamar a função abaixo
    function() {
      // opção selecionada
      let opcao = this.options[this.selectedIndex];
      // opção selecionada é "Escolher...", mostrar todas as linhas
      let mostrarTodos = this.selectedIndex == 0;

      // verificar as células da tabela que possuem o valor selecionado
      let tabela = document.querySelector('#tabela');
      // começar em 1 para ignorar a primeira linha (cabeçalhos estão na linha zero)
      for (let i = 1, row; row = tabela.rows[i]; i++) {
        let valor = row.cells[0].innerHTML; // neste exemplo, valor é 1 ou 2
        let texto = row.cells[1].innerHTML; // "A" ou "B"
        if ((opcao.value === valor && opcao.text === texto)
            || mostrarTodos) {
          // opção selecionada é igual a linha, ou é a opção "Escolher..."
          row.style.display = 'table-row';
        } else {
          row.style.display = 'none';
        }
      }
    }
  )
<select id="opcoes">
    <option selected>Escolher...</option>
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<table id="tabela">
  <tr>
    <th>id</th>
    <th>categoria</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
</table>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .