Dynamically copy text to clipboard in a table

Question

I'm making a website that's getting data from a database and putting it on a table with a button that should be able to copy the contents or a tag. I'm using Laravel by the way.

Here's my code...

HTML

<table class="table table-sm">
   <thead style="font-size: 12px;">
      <tr>
         <th scope="col">#</th>
         <th scope="col">Query</th>
         <th scope="col">Created at</th>
         <th scope="col">Copy</th>
      </tr>
   </thead>
   <tbody>
      @if(!$history_list->isEmpty())
      <p class="d-none">{{$i = 1}}</p>
      @foreach($history_list as $hl)
         <tr>
            <th scope="row">{{ $i++ }}</th>
            <td><textarea rows="8" class="querystr d-none">{{ $hl->query_text }}</textarea>{{ $hl->query_text }}</td>
            <td>{{ $hl->created_at }}</td>
            <td><button class="btn btn-primary btn-sm copybtn" style="font-size: 12px"><span class="oi oi-clipboard" title="copy" aria-hidden="true"></span> Copy</button></td></td>
         </tr>
      @endforeach
      @else
         <tr>
            <th scope="row" colspan="4">You have no queries in your history.</th>
        </tr>
      @endif
   </tbody>
</table>

JQuery... i think

var copyQueryBtn = document.querySelector('.copybtn');
copyQueryBtn.addEventListener('click', function(event) {
  var copyQuery = document.querySelector('.querystr');
  copyQuery.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

EDIT: I need it to work dynamically because I'm getting table data from my database, and I also updated the code that is close to this question, and it's still can't copy and it doesn't work on other row, I know because I used the console error messages.

Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Robert Wade, Nov 26 '17 at 15:07
I have seen that, but I want to copy a text without the use of a textarea, almost everything I've seen that has anything to do with the copying in HTML involves either the textarea or input text. @RobertWade — DonPatrick15, Nov 26 '17 at 15:40

Petrashka Siarhei · Accepted Answer · 2017-11-26T17:58:33.470

I rebuilded your code: JS:

   $(document).on('click',".copy",(ev)=>{
      let textArea = 
     ev.target.closest('tr').querySelector('.textArea');
    let selection = window.getSelection();
    let range =  document.createRange();
      range.selectNodeContents(textArea);
      selection.removeAllRanges();
      selection.addRange(range);
      console.dir( range.toString());
      document.execCommand('copy');
    })

HTML

 <table><tr>
      <td><div class="textArea" contenteditable =  "true"> </div></td>
       <td>
         create at ...
       </td>  
        <td><button class="copy">copy</button> </td>
      </tr>
    </table>

I replaced textarea to div with attribute contenteditable, and added to selection its content. https://codepen.io/piotrazsko/pen/eejMYX if you don't want to use jquery , try :

let allButtons = Array.from(document.querySelectorAll('.copy'));
allButtons.forEach((item)=>{
    item.addEventListener('click',(ev)=>{
       let textArea =     ev.target.closest('tr').querySelector('.textArea');
       let selection = window.getSelection();
       let range =  document.createRange();
       range.selectNodeContents(textArea);
       selection.removeAllRanges();
       selection.addRange(range);
       console.dir( range.toString());
       document.execCommand('copy');
     })
})

if you need use textarea, try next code:

let allButtons = Array.from(document.querySelectorAll('.copybtn'));
     allButtons.forEach((item)=>{
                   item.addEventListener('click',(ev)=>{
                    let textArea =     ev.target.closest('tr').querySelector('textarea');
                     textArea.focus();  
                      let text =  textArea.value;
                      textArea.setSelectionRange(0,text.length);                    
                      document.execCommand('copy');
    })
})

Yup, the last code was the one that did it, I've literally search for hours for a solution, thank you so much for answering, man! — DonPatrick15, Nov 26 '17 at 23:31

Dynamically copy text to clipboard in a table

1 Answers1