I need JQuery or javascript to copy 1 column to the clipboard

I want to write some JQuery or javascript that will make clickable the first column (currency) in this table and copy the text from column two (Wallet) to the clipboard.  I need it to work for most browsers and IOS / Android.

This is a JQuery datatable in an ASP.Net / Razor environment.

<table id="dt_LiveCoinWallets" class="table table-striped table-bordered table-hover table-condensed">
                            <thead>
                                <tr>
                                    <th title="Click to select column">
                                        <h3>Copy</h3>
                                    </th>
                                    <th>
                                        <h3>Your Wallet Address</h3>
                                    </th>
                                </tr>
                            </thead>
                            @foreach (var item in Model)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Currency)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Wallet)
                                    </td>
                                </tr>
                            }
                        </table>

Open in new window

CAMPzxzxDeathzxzxAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
To do this you need to put your target data in an input or textarea. You can then use the HTMLInputElement.select() function.

Here is some sample code
HTML
<table id="dt_LiveCoinWallets" class="table table-striped table-bordered table-hover table-condensed">
<thead>
  <tr>
	<th title="Click to select column">
	  <h3>Copy</h3>
	</th>
	<th>
	  <h3>Your Wallet Address</h3>
	</th>
  </tr>
</thead>
<tbody>
  <tr>
	<td>USD</td>
	<td><input type="text" readonly value="1234567890"/></td>
  </tr>
  <tr>
	<td>GBP</td>
	<td><input type="text" readonly value="2468101214"/></td>
  </tr>
  <tr>
	<td>EUR</td>
	<td><input type="text" readonly value="135791113"/></td>
  </tr>
  <tr>
	<td>ZAR</td>
	<td><input type="text" readonly value="1123581321"/></td>
  </tr>
  <tr>
	<td>XBT</td>
	<td><input type="text" readonly value="3141592659"/></td>
  </tr>
</tbody>
</table>

Open in new window

jQuery
<script>
$(function() {
  $('#dt_LiveCoinWallets tbody tr td:first-child').click(function(e) {
    var el = $(this).next().find('input')[0];
    el.select();
    document.execCommand("Copy");
    alert("Copied " + el.value);
  });
});
</script>

Open in new window


Working sample here
0
 
CAMPzxzxDeathzxzxAuthor Commented:
Works like a champ.  Thank you!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.