Copy table cell to clipboard with double click anywhere on its row (Javascript)

Question

We have a table with n rows. If you double-click any row, you copy the value of the last column of this row to the clipboard. I think it's a useful functionality but I'm not able to implement it. Any suggestion?

I've tried things similar to:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2

Not a duplicate, the link doesn't talk about tables. Also my problem is more simple. — Manelicus, Apr 19 '18 at 18:07
@Manelicus It doesn't matter. Your question is compound. The main crux is populating information into the clipboard. You don't show an attempt, so we don't know if the problem is not knowing how to populate the clipboard or if you are having trouble doing it with a table. That's why this question is both too broad, because it lacks an attempt, off-topic, since it asks for off-site resources/tutorial, and a duplicate. — zero298, Apr 19 '18 at 18:19
That's your opinion. The main crux is populating information into the clipboard, and? I asked for suggestions. Have a nice day! — Manelicus, Apr 19 '18 at 18:21

score 0 · Accepted Answer · answered Apr 19 '18 at 18:35

I don't know if a realy understod your question but maybe this can help you.

When you double click in the table row you copy the last character to clipboard.

Here is the code that I made:

// You can use any function to copy here
function copyToClipboard(textToCopy) {
    var input = document.createElement("input");
    document.body.appendChild(input);
    input.value = textToCopy;
    input.select();
    document.execCommand("Copy");
    input.remove();
}

function copyLastColumn(tr) {
    copyToClipboard(tr.lastElementChild.innerHTML);
    alert('copied to clipboard');
}

<table border="1">
    <tr ondblclick="copyLastColumn(this)">
        <td>a</td>
        <td>b</td>
        <td>c</td>
  </tr>
    <tr ondblclick="copyLastColumn(this)">
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr ondblclick="copyLastColumn(this)">
        <td>g</td>
        <td>h</td>
        <td>i</td>
    </tr>
</table>

Interesting! Thank you Ricardo. – Manelicus Apr 19 '18 at 18:40 — Manelicus, Apr 19 '18 at 18:40

Copy table cell to clipboard with double click anywhere on its row (Javascript)

1 Answers1