4
respostas

Trocar valores repetidos

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 ?

4 respostas

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 ?