Javascript copy命令不能处理所有动态生成的表项-jsp spring boot

我正在创建一个包含4列（id、DestinationURL、ShortLink、Action（copy））的表。所有的数据都来自数据库，我在JSP页面中用for-each循环创建内容。输出页面如下所示
在“操作”列之前，有一个隐藏字段，其中包含baseURL+ShortURL，即

http://localhost:8080/qcX4h6

。下面是我创建此表的代码

<table class="table table-responsive table-striped table-hover table-bordered vertical-alien-middle">
      <thead class="thead-dark">
           <tr>
               <th>Id</th>
               <th>Destination Url</th>
               <th>Short URL</th>
               <!--<th width="20%" colspan="3">Actions</th>-->
               <th>Actions</th>
           </tr>
      </thead>
      <tbody>
           <c:forEach var="links" items="${data}">
               <tr>
                   <td>${links.getId()}</td>
                   <td>${links.getDestinationUrlLink()}</td>
                   <td>${links.getShortUrlLink()}</td>
                   <td id="copyTd" hidden="">
                       <input type="text" id="${links.getId()}" value="${baseUrl}/${links.getShortUrlLink()}">
                   </td>
                   <td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink(${links.getId()})">
                            Copy
                       </button>
                   </td>
                   <!--<td><button type="submit" class="btn btn-primary btn-block">Edit</button></td>-->
                   <!--<td><button type="submit" class="btn btn-danger btn-block">Delete</button></td>-->
                </tr>
            </c:forEach>
      </tbody>
  </table>

因此，我的问题是如何使其他按钮使用相同的功能。我在函数中传递隐藏输入字段的id，所以它只对第一个按钮有效，而对其他按钮无效。

---

任何帮助都将不胜感激。提前感谢在您的代码中，即：

id=“copyTd”

这将被复制到第一行，因为同一id不能用于所有行，您可以在

中附加一些值，即：

copyTd.${links.getId（）}

此处，添加链接id以唯一标识每个

td

。只需添加

document.getElementById（“copyTd_u2;”+id）

这是您的

js

代码。您需要在代码中进行的更改如下：

Jsp代码：

<tr>
  <td>${links.getId()}</td>
  <td>${links.getDestinationUrlLink()}</td>
  <td>${links.getShortUrlLink()}</td>
  <!--added links_id to your td-->
  <td id="copyTd_${links.getId()}" hidden="">
   ...
  </td>

</tr>

function copyShortLink(id) {
  var input = document.getElementById(id);
  /*add same id to select particular td*/
  var td = document.getElementById("copyTd_" + id);
...

}

---

使用虚拟数据：

<tr>
  <td>${links.getId()}</td>
  <td>${links.getDestinationUrlLink()}</td>
  <td>${links.getShortUrlLink()}</td>
  <!--added links_id to your td-->
  <td id="copyTd_${links.getId()}" hidden="">
   ...
  </td>

</tr>

function copyShortLink(id) {
  var input = document.getElementById(id);
  /*add same id to select particular td*/
  var td = document.getElementById("copyTd_" + id);
...

}

功能copyShortLink（id）{
var输入=document.getElementById（id）；
var td=document.getElementById（“copyTd_u2;”+id）；
/*选择文本字段*/
td.hidden=false；
input.select（）；
input.setSelectionRange（0，99999）；/*用于移动设备*/
/*复制文本字段内的文本*/
文件。执行命令（“副本”）；
console.log（“文本复制…”+输入.value）；
td.hidden=true；
}

身份证件
目标Url
短网址
行动
${links.getId（）}
${links.getDestinationUrlLink（）}
美国广播公司
复制
${links.getId（）}
${links.getDestinationUrlLink（）}
abcd.com
复制