在循环生成内容时，如果需要为每一行添加复制到剪贴板的功能，并且每一行的数据都不同，那么直接使用相同的ID来标识需要复制的内容会导致点击任何按钮都只会复制第一行的数据。这是因为ID在HTML中必须是唯一的，JavaScript的document.getElementById()方法只会返回第一个匹配的元素。要解决这个问题，需要在循环中为每个元素动态生成唯一的ID，并将该ID传递给复制函数。
动态生成唯一ID
在PHP循环中，可以使用循环计数器来生成唯一的ID。首先，在循环开始之前初始化一个计数器变量：
<?php $i = 0; ?>
然后在循环内部，将计数器变量添加到元素的ID属性中：
<?php
for ($x=0; $x<$numresults; $x++) {
$sam=$info[$x]['samaccountname'][0];
$disp=$info[$x]['displayname'][0];
$dir=$info[$x]['homedirectory'][0];
echo "User Name : $sam";
echo "<br>Name : $disp";
echo "<br>Home Drive : <a class=clear href=$dir>$dir</a><br>";
?>
<p id="demo<?php echo $i; ?>">
<?php echo $dir ?>
</p>
<button onclick="copy('demo<?php echo $i; ?>')">Copy Keeping Format</button> <br><br>
<?php
$i++;
}
?>在这个例子中，
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
元素的ID被设置为demo，其中$i是循环计数器。这样，每次循环都会生成一个唯一的ID，例如demo0、demo1、demo2等等。同时，onclick事件处理程序也被修改为传递正确的ID给copy()函数。
JavaScript复制函数
JavaScript的copy()函数需要根据传入的ID来获取要复制的内容。下面是一个示例的copy()函数：
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);
}这个函数首先创建一个临时的
元素，并将要复制的内容设置为该元素的innerHTML。然后，它将焦点设置到该元素，并使用document.execCommand("copy")命令将内容复制到剪贴板。最后，它将临时元素从文档中移除。
注意事项
- 确保循环计数器在每次循环结束时递增，以生成唯一的ID。
- document.execCommand("copy") 方法在某些浏览器中可能已被弃用或需要特定的权限。建议使用现代的Clipboard API navigator.clipboard.writeText() 来实现复制功能，它提供了更好的安全性和用户体验。
总结
通过在循环中动态生成唯一的ID，并将其传递给JavaScript的复制函数，可以解决复制到剪贴板功能总是复制第一行的问题。这种方法可以确保每个按钮都复制其对应的数据行，从而实现正确的复制功能。同时，建议使用现代的Clipboard API来替代document.execCommand("copy") 方法，以获得更好的兼容性和安全性。
