2

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>xsample@example.com</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>xsample2@example.com</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 xsample@example.com 12121 1000 and 2018-07-19 (separate cells) when I press ctrl + v into the spreadsheet/Excel. Any help is much appreciated.

Brian Tompsett - 汤莱恩
  • 5,195
  • 62
  • 50
  • 120
c.k
  • 1,045
  • 1
  • 14
  • 30
  • The method `.attr()` gives you a String. What do you think doing `.select()` on a String will produce? – Zenoo Jul 23 '18 at 09:20
  • @Zenoo Whats on my mind there was to get the ID of the parent `id="row-1" ` then copy the data of all the `` under `` using `document.execCommand("copy");` And it does not work. – c.k Jul 23 '18 at 09:24
  • 1
    See my answer here for a cross-browser copy: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript/45308151#45308151 and for Excel you should seperate columns with tab `\t` and new rows with `\r\n`. A basic execCommand only works on an `input` I *think*. – Dominic Jul 23 '18 at 09:29

3 Answers3

6

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>xsample@gmail.com</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>xsample2@gmail.com</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>
Zenoo
  • 11,719
  • 4
  • 38
  • 57
  • Is there a way that i can manipulate the data to be copied. Like exclude the Last cell. And add an empty cell before the date? Also when the table have 1000 + rows the page is scrolling to the bottom of it. – c.k Jul 23 '18 at 09:43
  • Sure, here I used the siblings of the button you clicked. You're free to change that selector. – Zenoo Jul 23 '18 at 09:45
  • 1
    @c.k And to change the scroll, just append the ` – Zenoo Jul 23 '18 at 09:48
  • one more thing can you help me out removing the last data `new` when copying? – c.k Jul 24 '18 at 01:37
  • @c.k Try `$(this).closest('td').siblings().not(':last')` – Zenoo Jul 24 '18 at 06:57
2
html code given by you:

<table border='1'>
  <tr id="row-1" class="parent-row">
    <td><button class="copy-btn">Copy</button></td>
    <td> Tester</td>
    <td>xsample@gmail.com</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>xsample2@gmail.com</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>

javascript code:

$(".copy-btn").click(function() {
var success   = true,
      range     = document.createRange(),
      selection;
  var pid = $(this).parent().parent().text();

  var tmpElem = $('<div>');
    tmpElem.css({
      position: "absolute",
      left:     "-1000px",
      top:      "-1000px",
    });
    // Add the input value to the temp element.
    tmpElem.text(pid);
    $("body").append(tmpElem);
    // Select temp element.
    range.selectNodeContents(tmpElem.get(0));
    selection = window.getSelection ();
    selection.removeAllRanges ();
    selection.addRange (range);
    // Lets copy.
    try { 
      success = document.execCommand ("copy", false, null);
    }
    catch (e) {
      copyToClipboardFF(input.val());
    }
    if (success) {
      alert ("The text is on the clipboard, try to paste it!");
      // remove temp element.
      tmpElem.remove();
    }
});

function copyToClipboardFF(text) {
  window.prompt ("Copy to clipboard: Ctrl C, Enter", text);
}
Asif Mahamud
  • 573
  • 2
  • 10
0

Wrap your data to select for some thing .I use input for that.

$(".copy-btn").click(function() {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(this).closest('.parent-row').not('td:eq(1)').text()).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>xsample@gmail.com</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>xsample2@gmail.com</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>
Shree
  • 18,997
  • 28
  • 86
  • 133