CODEWITHSUNDEEP
javascriptgoogle-apps-script
KiKu
KiKu

Reputation: 377

Copy TEXT to Clipboard on Button-Click not working on Table

I have created a google web app which consists data - Ticket Number in bullet when click on this bucket text should get a copy.

Copy script is working fine on Table first row, second-row onwards it's not working

I have attached the script below, please help me to fix the issue 

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
   .evaluate().setTitle("Home Page").setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;
}

function getData() {
  return SpreadsheetApp
      .openById('1Nf080XKVLtt2AWr469aJrh6vhjdeinxBP1ehV3qBA64')
      .getDataRange()
      .getValues();
}
  
<div class="w3-container">
  <h2>Open Requsets</h2>

  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">
    <? var data = getData(); ?>
  <table class="w3-table-all w3-margin-top " id="myTable">
  <tr class="w3-pink">
      <th style="width:10%;">Requset ID</th>
      <th style="width:10%;">Requester Name</th>
      <th style="width:10%;">Requset Type</th>
    </tr>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><button onclick="copy('demo')"><a href="" target="_blank"><span id="demo"><?= data[i][j] ?></span></a></button> </td>
          <? } ?>
        </tr>
      <? } ?>
  </table>
</div>
  

  
  
  <script>
  function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
  
  </script>
  
  <hr>




 
<!-- for Accordion -->

<!-- for Accordion end-->
</body>
</html>

Upvotes: 0

Views: 217

Answers (1)

Thusitha
Thusitha

Reputation: 3511

You should use a unique id value for each td field like in below example. You can not use the same id for each td.

<div class="w3-container">
  <h2>Open Requsets</h2>

  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">
  <? var data = getData(); ?>
    <table class="w3-table-all w3-margin-top " id="myTable">
      <tr class="w3-pink">
        <th style="width:10%;">Requset ID</th>
        <th style="width:10%;">Requester Name</th>
        <th style="width:10%;">Requset Type</th>
      </tr>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><button onclick="copy(event)"><a href="" target="_blank"><span><?= data[i][j] ?></span></a></button> </td>
            <? } ?>
        </tr>
        <? } ?>
    </table>
</div>




<script>
  function copy($event) {
    var aux = document.createElement("div");
    aux.setAttribute("contentEditable", true);

    //Notice how we retreived the innerHTML
    aux.innerHTML = $event.target.innerHTML;

    aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
    document.body.appendChild(aux);
    aux.focus();
    document.execCommand("copy");
    document.body.removeChild(aux);
  }

Upvotes: 2

Related Questions