How to copy the contents of a table to the clipboard

Asked

Viewed 89 times

-1

Good night.

I’m trying to create a script that copies the text of <td> by clicking on it. Since the complete table has more than 2000 lines I am trying not to put commands directly into <td> and not to impair the performance of the page.

Example: when I click on the cell "Alpha", the contents of the cell will be copied to the clipboard, i.e."Alpha".

I couldn’t find an answer to any similar situation, either on Stack or other sites. Does anyone have any idea how this script could be mounted.

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>

javascript html table onclick clipboard

1 answer

0


Good night Lucas, I believe the code below can help you, I did the example using the 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>

  • Thank you very much for your reply, Jhonny Freire, you

  • Lucas, if it worked, mark it as a valid answer so that other people can benefit when they have the same problem.

  • Jhonny Freire, would you know how I can copy in a single click, both the cell <td> which has been clicked, for example, on the subsequent cell? Currently I am modifying the text to be copied like this: clip.writeText('complement for' + tr.innerHTML + 'extractor')

  • It’s basically the same thing, but you need to understand the code I posted here, if you understand will be able to do it quietly, just go through the 'tds' as was done in the 'tr' here in the code and get the next element using i+1. But for that you need to have understood the code I posted, you understood what and how it does?

Browser other questions tagged javascript html table onclick clipboard

You are not signed in. Login or sign up in order to post.