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>

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

当我按 ctrl + <时，应该仅粘贴Tester xsample@example.com 12121 1000和2018-07-19（单独的单元格） kbd> 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>

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

Answer 3

包装您的数据以进行某些选择。为此，我使用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>

表格行的剪贴板副本

3 个答案: