时间戳

首页 > 解决方案 > 复制命令不适用于所有动态生成的表项 - jsp spring boot

javascript - 复制命令不适用于所有动态生成的表项 - jsp spring boot

问题描述

我正在创建一个包含 4 列（id、DestinationURL、ShortLink、Action(copy)）的表。所有数据都来自数据库，我正在我的 JSP 页面中使用 for-each 循环创建内容。输出页面看起来像这样 在操作列之前有一个隐藏字段，其中包含 baseURL+ ShortURL 即。这是我创建此表的代码网址详情 img
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>

复制命令适用于第一个按钮，但不适用于所有后续按钮。这是我的javascript函数

function copyShortLink(id) {
    var input = document.getElementById(id);
    var td = document.getElementById("copyTd");
    /* Select the text field */
    td.hidden = false;
    input.select();
    input.setSelectionRange(0, 99999); /*For mobile devices*/

    /* Copy the text inside the text field */
    document.execCommand("copy");
    td.hidden = true;
}

所以我的问题是如何使其他按钮具有相同的功能。我在函数中传递了隐藏输入字段的 id，所以为什么它只适用于第一个按钮而不适用于其他按钮。
任何帮助将不胜感激。提前致谢

标签： javascriptspringjsponclick

解决方案

在您的代码 ie 中：id="copyTd"这将被复制到第一行，因为相同的 id 不能用于所有行，而是您可以在<td id="">ie 中附加一些值：copyTd_${links.getId()}在这里，添加链接 id 以唯一标识每个td。只需添加document.getElementById("copyTd_" + 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>

Javascript代码：

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

}

使用虚拟数据：

function copyShortLink(id) {
  var input = document.getElementById(id);
  var td = document.getElementById("copyTd_" + id);
  /* Select the text field */
  td.hidden = false;
  input.select();
  input.setSelectionRange(0, 99999); /*For mobile devices*/
 /* Copy the text inside the text field */
  document.execCommand("copy");
  console.log("Text copied ..." + input.value);
  td.hidden = true;

}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<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>abc.in</td>
        <td id="copyTd_abc" hidden="">
          <input type="text" id="abc" value="abc.in">
        </td>
        <td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink('abc')">
                            Copy
                       </button>
        </td>
      </tr>
      <tr>
        <td>${links.getId()}</td>
        <td>${links.getDestinationUrlLink()}</td>
        <td>abcd.com</td>
        <td id="copyTd_abcd" hidden="">
          <input type="text" id="abcd" value="abcd.com">
        </td>
        <td><button type="submit" class="btn btn-success btn-block" onclick="copyShortLink('abcd')">
                            Copy
                       </button>
        </td>
      </tr>
    </c:forEach>
  </tbody>
</table>

推荐阅读