javascript - Clipboard copy of table row - Stack Overflow

admin管理员组

文章数量:1344322

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=".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>

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./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.

• javascript
• jquery
• html-table

Share Improve this question Follow edited Jul 23, 2018 at 9:37 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 23, 2018 at 9:18 c.kc.k 1,10522 gold badges1818 silver badges3737 bronze badges 3

• The method .attr() gives you a String. What do you think doing .select() on a String will produce? – Zenoo Commented Jul 23, 2018 at 9: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 <td> under <tr> using document.execCommand("copy"); And it does not work. – c.k Commented Jul 23, 2018 at 9:24
• 1 See my answer here for a cross-browser copy: stackoverflow./questions/400212/… 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. – nanobar Commented Jul 23, 2018 at 9:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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./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>

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>[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>

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);
}

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./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>

本文标签： javascriptClipboard copy of table rowStack Overflow