0

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>
Mara Black
  • 1,666
  • 18
  • 23
Rick D
  • 63
  • 7
  • Possible duplicate of https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript – Rush W. 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) – Rush W. 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

1 Answers1

2

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>
Mara Black
  • 1,666
  • 18
  • 23
  • 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