javascript - 添加具有基于单元格内容的功能的复制按钮

Question

我有一个表格，其中包含一些数据，当双击以选择/复制/粘贴时，测试的两边都会出现一些空白(可能来自单元格内的其他一些项目)。

我的解决方案是让一个按钮显示在单击时复制文本的文本右侧。(感谢 jon-p ，我让按钮遍历单元格)

我的问题是如何添加一个函数来复制新按钮所在单元格的文本。

此外，我不能直接编辑页面，所以我使用 tampermonkey 来注入(inject)代码。

http://jsfiddle.net/pshock13/kcvbyq9r/

<table>
<thead>
  <th>Tools</th>
  <th>Shipment</th>
  <th>Barcode</th>
  <th>More Info</th>
</thead>
<tbody>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=123456789">123456789</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=asdfghjkl">asdfghjkl</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>9870356542</span>
      </div>
    </td>
  </tr>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=987654321">987654321</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=qwertyuiop">qwertyuiop</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>asfg456sdfg</span>
      </div>
    </td>
  </tr>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=123456789">123456789</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=asdfghjkl">asdfghjkl</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>9870356542</span>
      </div>
    </td>
  </tr>
  <tr>
    <td><span>&#x2714; &#x2718;</span></td>
    <td>
      <div class="relative">
        <a href="something.com/Search?searchKey=987654321">987654321</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <a href="na.something.com/results?s=qwertyuiop">qwertyuiop</a>
      </div>
    </td>
    <td>
      <div class="relative">
      <span>asfg456sdfg</span>
      </div>
    </td>
  </tr>
</tbody>
</table>

var copyBtn = "<span class='copy' onClick='copyText()'>&#128203;</span>"

var shipmentCells = document.querySelectorAll("tbody tr > td:nth-child(2) > div");
for(var i = 0; i < shipmentCells.length; i++){
  //Append the new element to the innerHTML
  shipmentCells[i].innerHTML += copyBtn;
}

Answer 1

您可以使用 the GM_setClipboard() function使这变得容易。

重要:

1. > Don't use onclick .
2. > Using .innerHTML is also poor practice -- 在用户脚本中更是如此。
3. 与 @require 一起使用时，使用 jQuery 几乎没有任何缺点，而且在编码的方便性、速度和简单性方面有很大的收获。

这里是一个完整的工作用户脚本，它添加并激活了复制按钮。我添加了一些可选的格式和 UI，只是为了咯咯笑:

// ==UserScript==
// @name     _Add copy buttons to a table
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @match    https://output.jsbin.com/vuyewal
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// @grant    GM_setClipboard
// ==/UserScript==
/* global $ */
/* eslint-disable no-multi-spaces */

//-- Add copy button to column 2:
$("td:nth-child(2) > div.relative").after (`<span class='tmCopyBtn'>&#128203;</span>`);

//-- Style it:
GM_addStyle ( `
    .tmCopyBtn { cursor: pointer; }
    /* Also tweak the div style: */
    td:nth-child(2) > div.relative { display: inline-block; margin-right: 1ex;}

    /* Also add blinker effect for better UI: */
    .justCopied { animation: blinkYellow 1s ease-out 2; }
    @keyframes blinkYellow {
        50% { background-color: yellow; }
    }
` );

//-- Activate it:
$("table").on ("click", ".tmCopyBtn", zEvent => {
    //-- Get text of adjacent <div> and strip leading/trialing whitespace:
    var targetDiv   = $(zEvent.target).prev ("div.relative");
    var textToCopy  = targetDiv.text ().trim ();

    GM_setClipboard (textToCopy, "text/plain");

    //-- Feedback to user:
    $(".justCopied").removeClass ("justCopied");
    targetDiv.parent ().addClass ("justCopied");
} );

任何人都可以针对 this target page at JS Bin 进行测试.