How to copy the text of html table to clipboard?

user_10547978 0
Viewed 5360

I am binding the data to html table by using angularjs functionality in separate .js file. Where as I want to copy these bounded text data and paste it to any text document by clicking the input button below.

<button type="button" class="btn" ng-click="selectElementContents();"></button>

and in angular controller written function as below..

$scope.selectElementContents = function () {
        copyTblData();        
    }
function copyTblData() {
        var copyText = document.getElementById('tablerecords');
        $('#tablerecords').focus();
        $('#tablerecords').select();
        document.execCommand('copy');            
    }

where I am doing mistake not understandable, required suggestion is appreciated.

angularjs html javascript
1 Answers

For select data , you must use ranges and select. You can try it:

let table = document.querySelector('#testTable');
let button = document.querySelector('#button');
function selectNode(node){
  let range  =  document.createRange();
  range.selectNodeContents(node)
  let select =  window.getSelection()
  select.removeAllRanges()
  select.addRange(range)
}
button.addEventListener('click',function(){
  selectNode(table);
  document.execCommand('copy')
  
})
td{
   border:1px solid black;
}
<table collapsed id = 'testTable'>
 <tr>
   <td>test</td>
    <td>test</td>
  </tr><tr>
   <td>test</td>
    <td>test</td>
  </tr>
</table>
<br/>
<button id = "button">select</button>

user_80869440
Related