copy table or div content on button click using jquery

I'm getting table html $(selector).html()

$(selector).html()

But after execute document.execCommand("copy"); it does not copy the content of the table.

document.execCommand("copy");

Please find attachment for more clearness.

function copy(selector)
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.focus(function()
document.execCommand('selectAll', false, null)
);
document.execCommand("copy");
$temp.remove();


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

<tbody>
<tr>
<td colspan="2" style="text-align: left; line-height: 40px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; text-transform: uppercase; background: #e6d05c75;">Accomodation</td>
</tr>
<tr>
<td width="50%">Country</td>
<td>Mauritius</td>
</tr>
<tr>
<td>Destination</td>
<td>All Hotels</td>
</tr>
<tr>
<td width="50%">Hotel Name</td>
<td>Anahita Mauritius - The Resort</td>
</tr>
<tr>
<td>Check In</td>
<td>22/Aug/2018</td>
</tr>
<tr>
<td>Check Out</td>
<td>24/Aug/2018</td>
</tr>
<tr>
<td colspan="2">
<table cellpadding="0px" cellspacing="0" width="100%" style=" padding:20px; line-height: 30px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; vertical-align: top" rules="all">
<tbody>
<tr style="background: #cce7ff;">
<td>Room Type</td>
<td>Meal Type</td>
<td>Offer</td>
</tr>
<tr>
<td>1 Bedroom Suite Garden(02 pax)</td>
<td>Half Board</td>
<td>N/A</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="background: #c0e098;font - size: 15px ">
<td>Total Package Cost</td>
<td>1502.00 USD</td>
</tr>
<tr>
<td><input readonly="" type="text" value="Click Me To Copy" class="allowCopy noselect"></td>
<td><button onclick="copy(tblcopy)" type="button">Click to Copy</button></td>
</tr>
</tbody>
</table>

copy('#tblcopy')

1 Answer
1

You might want to try this.

I based the selection of the text from this post Answered by @Tom Oakley

function selectText(el)
var doc = document;
var element = document.getElementById(el);
if (doc.body.createTextRange)
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
else if (window.getSelection)
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);


function copy(selector)
var $temp = $("<div id='toCopy'>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html());
selectText("toCopy");
document.execCommand("copy");
$temp.remove();


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblcopy">

<tbody>
<tr>
<td colspan="2" style="text-align: left; line-height: 40px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; text-transform: uppercase; background: #e6d05c75;">Accomodation</td>
</tr>
<tr>
<td width="50%">Country</td>
<td>Mauritius</td>
</tr>
<tr>
<td>Destination</td>
<td>All Hotels</td>
</tr>
<tr>
<td width="50%">Hotel Name</td>
<td>Anahita Mauritius - The Resort</td>
</tr>
<tr>
<td>Check In</td>
<td>22/Aug/2018</td>
</tr>
<tr>
<td>Check Out</td>
<td>24/Aug/2018</td>
</tr>
<tr>
<td colspan="2">
<table cellpadding="0px" cellspacing="0" width="100%" style=" padding:20px; line-height: 30px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; vertical-align: top" rules="all">
<tbody>
<tr style="background: #cce7ff;">
<td>Room Type</td>
<td>Meal Type</td>
<td>Offer</td>
</tr>
<tr>
<td>1 Bedroom Suite Garden(02 pax)</td>
<td>Half Board</td>
<td>N/A</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="background: #c0e098;font - size: 15px ">
<td>Total Package Cost</td>
<td>1502.00 USD</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<button onclick="copy('#tblcopy')" type="button">Click to Copy</button>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.