Em uma tabela
coluna_1 coluna_2 coluna_3 1 m 10 1 s 10 2 x 5
tenho como esconder os valores repetidos por linha ou trocar via javascript ?
Em uma tabela
coluna_1 coluna_2 coluna_3 1 m 10 1 s 10 2 x 5
tenho como esconder os valores repetidos por linha ou trocar via javascript ?
Sim, você pode mapear as linhas(tr
) da sua tabela pegando cada dado(td
). Tendo isso atribuído localmente em uma variável você pode verificar as repetições e tomar sua decisão de modificação.
Tendo feito isso é só reescrever no DOM
o conteúdo alterado.
Tem algum exemplo de como seria ?
Fiz um exemplo que verifica por linha da tabela e apaga todas as repetições após a primeira.
Segue o link: https://jsfiddle.net/x1vyzk40/1/
Ou no código abaixo:
HTML
<table>
<thead>
<tr>
<th>Coluna A</th>
<th>Coluna B</th>
<th>Coluna C</th>
</tr>
</thead>
<tbody>
<tr class="linha">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="linha">
<td>3</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<button type="text" id="botao">Remover dados repetidos nas linhas</button>
JavaScript
document.querySelector('#botao').addEventListener('click', function(){
//pega todas as trs
trs = document.querySelectorAll('.linha');
//para cada tr
trs.forEach(function(tr){
//pega todas tds
tds = tr.querySelectorAll('td');
//cria um array referente aos dados da tr
let dadosDaLinha = [];
//para cada td
tds.forEach(function(td){
//pega o dado da td
let dado = td.textContent;
//testa se o dado já existe na linha
if(dadosDaLinha.includes(dado)){
//se existe, é repetido, entao apaga
td.textContent = '';
}
//adiciona o dado na lista para testar depois se ele ja apareceu
dadosDaLinha.push(dado);
});
});
});
Espero que seja útil!
Eu tentei modificar o código para apagar os valores repetidos na coluna porém não funciona por coluna. Por coluna não é possível ?