在动态生成的内容中，实现点击按钮复制特定行内容到剪贴板的功能，关键在于确保每个按钮和其对应的文本元素都有唯一的标识符。当使用循环生成多个包含复制功能的行时，如果所有按钮都指向同一个 ID，点击任何按钮都只会复制第一个元素的内容。以下将详细介绍如何通过 PHP 生成唯一的 ID，并修改 JavaScript 代码以实现正确的功能。
为每个元素生成唯一 ID
在使用循环生成内容时，可以通过一个计数器变量来为每个元素生成唯一的 ID。首先，在循环外部初始化计数器：
然后在循环内部，将计数器变量嵌入到 HTML 元素的 ID 中：
<p id="demo"> <button onclick="copy('demo')">Copy Keeping Format
最后，在循环结束前，递增计数器：
这样，每次循环都会生成一个不同的 ID，例如 demo0、demo1、demo2 等，确保每个段落和按钮都有唯一的标识。
修改 JavaScript 函数
原来的 JavaScript 函数 copy 接收一个元素 ID 作为参数，并尝试复制该元素的内容。现在，由于每个元素都有唯一的 ID，我们需要确保函数能够正确地选择对应的元素。
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);}
这个函数通过 document.getElementById(element_id) 来获取指定 ID 的元素，并将其内容复制到剪贴板。由于每个元素现在都有唯一的 ID，因此函数能够正确地复制对应行的内容。
完整示例代码
下面是一个完整的示例代码，展示了如何使用 PHP 生成唯一的 ID，并结合 JavaScript 函数实现点击按钮复制特定行内容的功能：
<?php$numresults = 5; // 假设有 5 行数据$SearchFor = "example"; // 假设搜索关键词是 example$info = [];for ($i = 0; $i < $numresults; $i++) { $info[$i]['samaccountname'][0] = "user" . $i; $info[$i]['displayname'][0] = "User " . $i; $info[$i]['homedirectory'][0] = "/home/user" . $i;}echo "Search again";echo "There are $numresults results for your search '$SearchFor'";if ($numresults > 0) { echo " these are:
"; echo ""; $i = 0; for ($x = 0; $x < $numresults; $x++) { $sam = $info[$x]['samaccountname'][0]; $disp = $info[$x]['displayname'][0]; $dir = $info[$x]['homedirectory'][0]; $fil = $info[$x]['homedirectory'][0]; $displayout = substr($sam, 0, 4); echo "User Name : $sam"; echo "
Name : $disp"; echo "
Home Drive : $dir
"; ?> <p id="demo"> <button onclick="copy('demo')">Copy Keeping Format
<?php $i++; } echo "";}?>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);}
注意事项
确保计数器变量在每次循环时都递增，以生成唯一的 ID。确保 JavaScript 函数能够正确地选择对应的元素。避免使用相同的 ID 在同一页面上出现多次，这会导致 JavaScript 无法正确选择元素。
总结
通过为每个元素生成唯一的 ID，并修改 JavaScript 函数以根据该 ID 选择正确的元素，可以确保点击按钮时能够准确复制对应行的内容到剪贴板。这种方法适用于动态生成表格或列表的场景，可以提高用户体验。
以上就是实现点击按钮复制特定行内容到剪贴板的教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1321769.html
微信扫一扫 
支付宝扫一扫 
