Pressing button in row of table to copy cell to clipboard - Javascript

Question

I was wondering if a guru could help me out with this one. I have a table with a button in each row. After pressing the copy button, it should copy the verbiage that is in cell 2 of that row. I am able to get an alert to come up, but I need it to copy to clip board, so a user can paste it to another application. Also, this method works in chrome, but not IE11. Is there a method that works for both? Thanks so much!

var a = document.getElementsByClassName('otherButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {

    var b = this.parentNode.parentNode.cells[1].textContent;
    alert(b);

  });
}

<table id="somerow">
  <tr>
    <th>CustomerNr</th>
    <th>Name</th>
    <th>Contact</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Cigarettes Inc</td>
    <td>Rambo</td>
    <td><button class="otherButton">Copy</button></td>
  </tr>
  <tr>
    <td>22</td>
    <td>Razor</td>
    <td>David</td>
    <td><button class="otherButton">Copy</button></td>
  </tr>
  <tr>
    <td>3</td>
    <td>H&M</td>
    <td>Samuel Adams</td>
    <td><button class="otherButton">Copy</button></td>
  </tr>
</table>

Possible duplicate of https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Tethys0, May 13 '20 at 13:33
Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Tethys0, May 13 '20 at 13:33
Sorry, I should have been more specific. My code above does not work in IE11 that uses the alert. — Rick D, May 13 '20 at 13:40

score 0 · Answer 1 · answered May 13 '20 at 13:32

Take a look at this copy-output-of-a-javascript-variable-to-the-clipboard but be aware that execCommand is deprecated. If your project allows external dependecies, you can use clipboardjs

var a = document.getElementsByClassName('otherButton');

for (var i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    var b = this.parentNode.parentNode.cells[1].textContent;
    copyToClipboard(b);
    alert(b);
  });
}

function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}

<table id="somerow">
  <tr>
    <th>CustomerNr</th>
    <th>Name</th>
    <th>Contact</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Cigarettes Inc</td>
    <td>Rambo</td>
    <td><button class="otherButton">Copy</button></td>
  </tr>
  <tr>
    <td>22</td>
    <td>Razor</td>
    <td>David</td>
    <td><button class="otherButton">Copy</button></td>
  </tr>
  <tr>
    <td>3</td>
    <td>H&M</td>
    <td>Samuel Adams</td>
    <td><button class="otherButton">Copy</button></td>
  </tr>
</table>

Good stuff Mara. Thanks for this. This works on Chrome, but not IE11. I was having issues originally with the javascript at the top of page without the copytoclipboard code. Is there a way to accomplish this in Chrome and IE11. Unfortunately, my project does not allow for external dependencies. Thanks again for everybody's time. — Rick D, May 13 '20 at 13:54
I ran the debugger in IE11 and this is the error I get. Object doesn't support property or method 'getElementsByClassName' I am not understanding this because I have used getElementsByClassName in IE in other projects. — Rick D, May 13 '20 at 15:23
@RickD well.. if your peoject suports, you can use `jQuery` :-? or implement `getElementByClassName` in your peoject beacuse IE doesnot know about it ( read more here: [getelementsbyclassname-doesnt-work-in-old-internet-explorers-like-ie6-ie7-i](https://stackoverflow.com/questions/6584635/getelementsbyclassname-doesnt-work-in-old-internet-explorers-like-ie6-ie7-i) ) — Mara Black, May 14 '20 at 08:44

Pressing button in row of table to copy cell to clipboard - Javascript

1 Answers1