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

我有一个表，其中包含一些数据，当双击select/copy/paste时，在测试的任一侧都会出现一些空白，这些空白可能来自单元格中的其他项目

我的解决方案是让一个按钮显示文本的右侧，在单击时复制文本

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

另外，我不能直接编辑页面，所以我使用tampermonkey注入代码

你可以用它来简化这件事

重要：

. -在用户脚本中更是如此。 当与@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");
} );

---

任何人都可以对其进行测试。

好的，这样就行了。索塔。我在div中有一些工具，当它们悬停时，shipID会覆盖copy按钮。为了解决这个问题，我在创建按钮时使用了.append而不是.after，在您尝试使用按钮进行复制之前，它可以正常工作。因为它现在与文本一起位于div中。找到的解决方案：。上一个a；在这一点上，我已经为项目中的其他内容链接了jquery 3.3.1，我可以留下它来让它正常工作吗？或者我需要两者吗？如果您已经@required jquery 3.3.1，那就足够了。如果您以其他方式添加了它，那么您要么需要两者都添加，要么删除JQ3.3.1。您的脚本现在在沙箱中运行，这是GM_setClipboard的要求和副作用。所以它只会看到你所需要的。我已经有了它。我已经有了一个用于其他内容的.css文件，因为我觉得它比使用GM_addStyle更简单。

// ==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");
} );