Kiran Shety Kiran Shety - 27 days ago 8
Javascript Question

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>




Answer Source

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);
  }