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.

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.

• javascript
• html
• angularjs

• Is your table selected? – Poul Bak Commented Oct 23, 2018 at 18:54
• no, its not getting selecting even. – abbas Commented Oct 23, 2018 at 18:56

1 Answer 1

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>