按钮上的TEXT复制到剪贴板 - 单击不在表上

Question

我创建了一个包含数据的Google网络应用程序 - 单击此存储桶文本时，子弹中的故障单编号应该可以获得副本。

复制脚本在Table第一行正常工作，第二行以后它无法正常工作

我已附上以下脚本，请帮我解决问题

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 1

您应为每个id字段使用唯一的td值，如下例所示。您不能对每个id使用相同的td。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;