copy table or div content on button click using jquery

Question

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

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

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>

I made you a snippet. Please fix the console error - perhaps you mean `copy('#tblcopy')` and have an ID="tblcopy" on the html that you did not show? — mplungjan, Aug 22 '18 at 08:19
Why did you edit my snippet. It is really useful to have!!! Please keep it there and fix your HTML — mplungjan, Aug 22 '18 at 08:21
Do you get any errors in the console? Does it copy anything at all? — Oram, Aug 22 '18 at 08:23
From close vote: "Questions seeking debugging help ("why isn't this code working?") must include the desired behaviour, a specific problem or error and the shortest code necessary **to reproduce it**.". In your case, your code does not work (see mplungjan's comments), so we can't see if it's the copy not working or just a typo. This would be clearer if you provided error messages from the console rather than just "it's not working" (ie is it the missing variable/selector or is it the copy itself not working?) — freedomn-m, Aug 22 '18 at 08:25

Neil Villareal · Accepted Answer · 2018-08-22T10:06:14.093

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>

copy table or div content on button click using jquery

1 Answers1