I have a table with multiple entries, I would like through select to select a data type and only appear that selected data.
<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> You can use addEventListener('change', ...) and define a function that will be called whenever select is changed.
In this function, just take the value selected in select and loop in the table rows, comparing the values with the chosen option.
Then just change the display property of each line to the value table-row when it should be shown, or none when it should be hidden.
In the example below I'm assuming that you want to compare either the value of the selected option (1 or 2 in the case) as well as its text ("A" or "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> In the above example, if you change the select to "A" or "B", the respective lines will be shown (and the others hidden). Then, if you select the "Choose ..." option, no line will be shown (except the header), after all, none of the rows in the table corresponds to this option.
If you want all lines to be shown by selecting "Choose ..." (returning to the initial state of select ), simply add this condition to the code:
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>