How would I link a copy button to a cell in a table?

Question

I have a copy button script:

function myFunction() {
    var table = document.getElementById('myTable');
    var copyText = table.rows[1].cells[0].innerHTML;
    copyText.select();
    document.execCommand("copy");
    alert("Copied");
}

And my table:

<table id="myTable">
{% for resp in results %}
        <tr>
            <td>{{ resp }}</td>
            <td>{{ resp.Question_id.Statement }}</td>
            <td><button onclick="myFunction()">Copy text</button></td>
        </tr>
    {% endfor %}
</table>

I want the button to copy the text inside td {{ resp }} /td

https://stackoverflow.com/a/45071478/1964336 – jatinder bhola Jul 26 '18 at 14:22 — jatinder bhola, Jul 26 '18 at 14:22

score 0 · Answer 1 · answered Jul 26 '18 at 14:43

0

function myFunction(val, event) {
  var inp = document.createElement('input');
  document.body.appendChild(inp)
  inp.value = val;
  inp.select();
  document.execCommand('copy', false);
  inp.remove();
  alert('copied');
}

<table id="myTable">
  <tr>
    <td>one</td>
    <td><button onclick="myFunction('one')">Copy text</button></td>
  </tr>

  <tr>
    <td>two</td>
    <td><button onclick="myFunction('two')">Copy text</button></td>
  </tr>

  <tr>
    <td>three</td>
    <td><button onclick="myFunction('three')">Copy text</button></td>
  </tr>

  <tr>
    <td>four</td>
    <td><button onclick="myFunction('four')">Copy text</button></td>
  </tr>

</table>

a quick solution will be passing the text (to be copied) with in the function as argu. ctrl + v to see the result.

answered Jul 26 '18 at 14:43

jatinder bhola

385
1
7
23

it works when i put in a variable like 'reponse'. But what if the variable i want to copy is in this format {{ resp }} – Lloyd Jul 26 '18 at 14:50
try passing resp directly. – jatinder bhola Jul 26 '18 at 14:56
tried myFunction(resp) and myFunction('{{ resp }}'), both don't work – Lloyd Jul 26 '18 at 14:59
what frontend are you using? – jatinder bhola Jul 26 '18 at 15:02
i am using django as the front end – Lloyd Jul 26 '18 at 15:06
I am not able to reproduce it in Djando as I never worked on it but I code in angularjs and it seem like working. https://codepen.io/jatinderbhola/pen/vaJPee?editors=1010#0 can you share a codepan/ fiddle code so that I can look into it. – jatinder bhola Jul 26 '18 at 15:18
it seems to work for some of the {{ resp }} but not all. If {{ resp }} is one line it works but if it has linebreaks in it it does not. is there a way around this? – Lloyd Jul 26 '18 at 15:19
can you share what resp look like? – jatinder bhola Jul 26 '18 at 15:21
Using the function you have given, how would i replace
tags with linebreaks and
tags with ""?
– Lloyd Jul 30 '18 at 07:49

How would I link a copy button to a cell in a table?

1 Answers1