Ndtyjky

I have a table that has some data that when double clicked to select/copy/paste ends up with some white space on either side of the test (could be from some of the other items inside the cell).

My solution is to have a button show the right of the text that copies the text when clicked.(thanks to jon-p, I have the buttons iterated through the cells)

My question is how can I add a function that copies the text of the cell that the new button is in.

Also, I can't edit the page directly so I'm using tampermonkey to inject the code.

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>✔ ✘</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>✔ ✘</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>✔ ✘</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>✔ ✘</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()'>📋</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;

}

You can use the GM_setClipboard() function to make this easy.

Important:

1. 
   Don't use onclick.


2. 
   Using .innerHTML is also poor practice -- doubly so in a userscript.


3. When used with @require, there is almost no downside to using jQuery, and a lot of gain in coding ease, speed, and simplicity.

Here's a complete working userscript that adds and activates copy buttons. I added some optional formatting and UI, just for giggles:

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

} );

Anyone can test it against this target page at JS Bin.