У меня есть таблица, в которой есть некоторые данные, которые при двойном щелчке для выбора / копирования / вставки заканчиваются небольшим пробелом по обе стороны от теста (может быть из некоторых других элементов внутри ячейки).

Мое решение состоит в том, чтобы кнопка отображалась справа от текста, который копирует текст при нажатии. (Благодаря jon-p , у меня кнопки перебираются по ячейкам)

Мой вопрос в том, как добавить функцию, которая копирует текст ячейки, в которой находится новая кнопка.

Кроме того, я не могу редактировать страницу напрямую, поэтому я использую tampermonkey для введения кода.

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;
}
1
Pshock13 12 Ноя 2018 в 10:44

1 ответ

Лучший ответ

Вы можете использовать функцию GM_setClipboard(), чтобы упростить эту задачу.

Важный:

  1. Не используйте onclick.
  2. Использование .innerHTML также является плохой практикой - вдвойне в пользовательском скрипте.
  3. При использовании с @require почти нет недостатков в использовании jQuery, а также значительно улучшается легкость, скорость и простота кодирования.

Вот полный рабочий скрипт пользователя , который добавляет и активирует кнопки копирования. Я добавил дополнительное форматирование и пользовательский интерфейс, просто для смеха:

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

Любой может протестировать его на этой целевой странице в JS Bin .

1
Brock Adams 13 Ноя 2018 в 00:36