Clipboard copy of table row

Question

I want to copy the row of a table so that it will be easier for me to paste it into the spreadsheet.

$(".copy-btn").click(function() {
  var pid = $(this).closest('.parent-row').attr('id');
  pid.select();
  document.execCommand("copy");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
  <tr id="row-1" class="parent-row">
    <td><button class="copy-btn">Copy</button></td>
    <td> Tester</td>
    <td>[email protected]</td>
    <td>12121</td>
    <td>1000</td>
    <td><a class="fancybox" href="/uploads/89197934977.jpeg">img</a></td>
    <td>2018-07-19</td>
    <td><span>new</span></td>
  </tr>

  <tr id="row-2" class="parent-row">
    <td><button class="copy-btn">Copy</button></td>
    <td> Tester 2</td>
    <td>[email protected]</td>
    <td>145345</td>
    <td>1050</td>
    <td><a class="fancybox" href="/uploads/89197955551.jpeg">img</a></td>
    <td>2018-07-20</td>
    <td><span>new</span></td>
  </tr>
</table>

This is what I have tried so far. After clicking the copy button, the function does not copy the table row.

It should paste only Tester [email protected] 12121 1000 and 2018-07-19 (separate cells) when I press ctrl + v into the spreadsheet/Excel. Any help is much appreciated.

Answer 1

You could create a temporary <textarea>, go through all your <td> and paste their text into this <textarea>.

Then select everything, copy it and remove the temporary <textarea>:

$(".copy-btn").click(function() {
  let tmpElement = $('<textarea style="opacity:0;"></textarea>');
  let parent = $(this).closest('td').siblings().each(function(){
    tmpElement.text(tmpElement.text() + $(this).text() + '\t');
  });
  
  tmpElement.appendTo($('body')).focus().select();
  document.execCommand("copy");
  tmpElement.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
  <tr id="row-1" class="parent-row">
    <td><button class="copy-btn">Copy</button></td>
    <td> Tester</td>
    <td>[email protected]</td>
    <td>12121</td>
    <td>1000</td>
    <td><a class="fancybox" href="/uploads/89197934977.jpeg">img</a></td>
    <td>2018-07-19</td>
    <td><span>new</span></td>
  </tr>

  <tr id="row-2" class="parent-row">
    <td><button class="copy-btn">Copy</button></td>
    <td> Tester 2</td>
    <td>[email protected]</td>
    <td>145345</td>
    <td>1050</td>
    <td><a class="fancybox" href="/uploads/89197955551.jpeg">img</a></td>
    <td>2018-07-20</td>
    <td><span>new</span></td>
  </tr>
</table>