How to copy table data with input text as cell without jQuery to ClipBoard?

Question

I have a simple table of a format similar to following:

<table>
  <thead>
    <tr>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Savings 
         <button type="button" (click)="submit()">Click Here</button>
      </td>
      <td *ngFor="let data in items"><input type="text" [value]="data.savings"></td>
    </tr>
    <tr>
     <td> [Similar to above row]</td>
    </tr> 
  </tbody>
</table>

How do I properly copy the table with input values without jQuery maintaining row structure? I only care about rows data and not headers or cell name. I consulted Copy table rows to clipboard- copying only the first page but it copies the structure of data and not the input field value?

David Jones · Accepted Answer · 2020-05-07T02:59:14.820

Are you saying getting the value of the input box in each row of the table? Can be obtained with pure javascript：

<script>
     var  values=document.getElementsByTagName("input");
     alert(values[0].value);
</script>

//document.getElementsByTagName (name) ：Find elements by tag name

This can be copied:

<script type="text/javascript">
function copy()
{
 var  values=document.getElementsByTagName("input");
 values[0].select(); // Select object
 document.execCommand("Copy"); //Execute browser copy command
 alert("Has been copied, can be pasted");
}
</script>
<input type="button" onClick="copy()" value="Click Copy Code" />

copy multiple lines:

<script type="text/javascript">
function copy()
{

    var  values=document.getElementsByTagName("input");
    var textarea =document.createElement('textarea'); // create  textarea label
    //Traverse the content of the table and splice it into the content of the textarea
    for(var i=0;i<values.length; i++){
         textarea.innerHTML= textarea.innerHTML+=values[i].value+'\n'
    }
    document.body.appendChild(textarea) // Add to body  
    textarea.select();    
    document.execCommand("Copy"); //Execute browser copy command
    textarea.remove(); 
    alert("Has been copied, can be pasted");
}
</script>
<input type="button" onClick="copy()" value="Click Copy Code" />

Your approach looks fine but won't that get me data as a single string instead of maintaining the n-rows format? — developer, May 06 '20 at 13:50
If you are copying a multi-line table, you can try to traverse the data and then use a textarea to load the data, copy the content in the textarea and delete it. — David Jones, May 07 '20 at 03:00

How to copy table data with input text as cell without jQuery to ClipBoard?

1 Answers1