-1

Boa noite.

Eu estou tentando criar um script que copie o texto do <td> ao clicar nele. Como a tabela completa tem mais de 2000 linhas eu estou tentando não colocar comandos diretamente em <td> e para não prejudicar o desempenho da página.

Exemplo: quando eu clicar na célula "Alfa", vai ser copiado para a área de transferência o conteúdo da célula, ou seja "Alfa".

Não consegui encontrar uma resposta para alguma situação similar, nem no Stack nem em outros sites. Alguém tem alguma ideia de como esse script poderia ser montado.

table {
         font-family: arial, sans-serif;
         border-collapse: collapse;
         width: 100%;
         }
         td, th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
         }
<h2>AÇÕES</h2>
<table>
<tbody>
<tr><th>Ação</th><th>Descrição</th><th>Destino</th></tr>
 <tr><td>0906</td><td>Comando A</td><td>Alfa</td></tr>
 <tr><td>0047</td><td>Comando B</td><td>Beta</td></tr>
 <tr><td>0796</td><td>Comando C</td><td>Gama</td></tr>
</tbody>
</table>

1 Resposta 1

0

Boa noite Lucas, Acredito que o código abaixo pode te ajudar, fiz o exemplo usando a Clipboard API (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)

    <html>
   <body>
      <h2>AÇÕES</h2>
      <table>
         <tbody>
            <tr>
               <th>Ação</th>
               <th>Descrição</th>
               <th>Destino</th>
            </tr>
            <tr>
               <td>0906</td>
               <td>Comando A</td>
               <td>Alfa</td>
            </tr>
            <tr>
               <td>0047</td>
               <td>Comando B</td>
               <td>Beta</td>
            </tr>
            <tr>
               <td>0796</td>
               <td>Comando C</td>
               <td>Gama</td>
            </tr>
         </tbody>
      </table>
      <script>
         const trs = document.getElementsByTagName('tr');
         
         for(let i = 0; i < trs.length; i++)
         {
            trs[i].addEventListener('click', function(e) {
                const tr = e.target;
                const clip = navigator.clipboard;
                
                clip.writeText(tr.innerHTML).then(() => console.log('sucesso')).catch(e => console.error(e));
                
            });
         }
         
      </script>
   </body>
</html>
4
  • Muito obrigado pela resposta, Jhonny Freire, voc
    – Lucas
    Commented 13/10/2020 às 21:14
  • Lucas, se deu certo, marque como resposta válida para que outras pessoas possam se beneficiar quando tiverem o mesmo problema. Commented 13/10/2020 às 21:58
  • Jhonny Freire, você saberia como eu posso copiar em um mesmo clique, tanto a célula <td> que foi clicada, quanto a célula subsequente, por exemplo? Atualmente eu estou modificando o texto a ser copiado assim: clip.writeText('complemento a favor' + tr.innerHTML + 'extrator')
    – Lucas
    Commented 13/10/2020 às 21:59
  • É basicamente a mesma coisa, mas você precisa compreender o código que eu postei aqui, se compreender vai conseguir fazer tranquilamente, é só percorrer os 'tds' como foi feito nos 'tr' aqui no código e obter o próximo elemento usando i+1. Mas para isso você precisa ter entendido o código que postei, você entendeu o que e como ele faz? Commented 13/10/2020 às 22:46

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 .