javascript - 表行的剪贴板副本

Question

我想复制表格的行，以便更轻松地将其粘贴到电子表格中。

$(".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>

到目前为止，这是我尝试过的。单击复制按钮后，该函数不会复制表格行。

它应该只粘贴 Tester xsample@example.com 12121 1000 和 2018-07 -19(单独的单元格)当我按 ctrl + v 进入电子表格/Excel 时。 非常感谢任何帮助。

Answer 1

您可以创建一个临时的 <textarea> , 遍历你所有的 <td>并将他们的文本粘贴到此 <textarea> .

然后全选，复制并删除临时<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>