表格行的剪贴板复制

Question

表格行的剪贴板复制

3

我想复制表格中的一行，这样我就可以更容易地将它粘贴到电子表格中。

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

这是我迄今为止尝试过的。点击复制按钮后，函数没有复制表格行。

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

- c.k

方法.attr()会给你一个字符串。你认为在一个字符串上执行.select()会产生什么结果？ - undefined

@Zenoo 我脑海中的想法是获取父元素 id="row-1" 的ID，然后使用 document.execCommand("copy"); 复制所有 <tr> 下的所有 <td> 的数据。但是它并没有起作用。 - undefined

1

请查看我在这里的答案，以获取适用于各种浏览器的复制方法：https://dev59.com/fHRC5IYBdhLWcg3wJNcN#45308151 对于Excel，您应该使用制表符\t分隔列，并使用换行符\r\n分隔行。基本的execCommand只适用于input元素，我认为。 - undefined

3个回答

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 代码：

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

0

将您的数据包装起来以选择某些东西。我使用input来实现这一点。

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

- 4b0

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zenoo · Accepted Answer

你可以创建一个临时的 <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>