实现点击按钮复制对应行内容的正确方法-php教程-PHP中文网

实现点击按钮复制对应行内容的正确方法

碧海醫心

发布： 2025-09-25 17:58:00

原创

538人浏览过

实现点击按钮复制对应行内容的正确方法

第一段引用上面的摘要：

本文旨在解决在循环生成内容时，点击复制按钮总是复制第一行的问题。通过为每个元素生成唯一的ID，并修改JavaScript函数以正确识别目标元素，确保点击按钮能够准确复制对应行的内容，从而实现预期的复制功能。

在动态生成内容，特别是使用循环生成多个相似元素时，经常会遇到需要为每个元素添加复制到剪贴板功能的需求。然而，如果处理不当，很容易出现点击任何按钮都只复制第一个元素内容的问题。这通常是由于元素ID重复导致的。HTML中，ID应该是唯一的，用于精确标识页面上的元素。当多个元素具有相同的ID时，JavaScript的document.getElementById()方法只会返回第一个匹配的元素，导致后续的操作都针对该元素进行。

解决此问题的关键在于为每个需要复制的元素生成唯一的ID，并确保JavaScript函数能够正确地根据点击的按钮找到对应的元素。

解决方案

以下是一种常见的解决方案，结合PHP和JavaScript，为每个元素生成唯一的ID，并实现复制功能：

初始化计数器： 在循环开始之前，初始化一个计数器变量，用于生成唯一的ID。

标书对比王
标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情
```
<?php
$i = 0;
?>
```
登录后复制

在循环中生成唯一的ID： 在循环内部，使用计数器变量为每个元素生成唯一的ID。

<p id="demo<?php echo $i; ?>">
  <?php echo $dir ?>
</p>
<button onclick="copy('demo<?php echo $i; ?>')">Copy Keeping Format</button> <br><br>

登录后复制

递增计数器： 在循环结束之前，递增计数器变量，以便为下一个元素生成不同的ID。
```
<?php
$i++;
?>
```
登录后复制

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

登录后复制

完整示例

以下是一个完整的示例代码，演示如何使用PHP和JavaScript实现点击按钮复制对应行内容的功能：

<?php
$numresults = 5; // 假设有5个结果
$SearchFor = "example"; // 假设搜索关键词是 example

echo "<div style='position: fixed; float: right; padding-left: 450px;'><a class=clear href=javascript:history.go(-1)>Search again</a></div>";
echo "<div><p>There are <b>$numresults</b> results for your search '<i><b>$SearchFor</i></b>'";
if ($numresults > 0) {

    echo " these are:</p></div>";
    echo "<div>";

    $i = 0;
    for ($x = 0; $x < $numresults; $x++) {                          //display the results
        $sam = "user" . $x; // 模拟数据
        $disp = "User Name " . $x; // 模拟数据
        $dir = "/home/user" . $x; // 模拟数据
        $fil = "/home/user" . $x; // 模拟数据
        $displayout = substr($sam, 0, 4);

        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++;
    }
    echo "</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>

登录后复制