PHP循环生成表格中JS复制文本异常：点击任意按钮仅复制最后一行

问题根源 #

你在PHP循环里每次都重新定义copytoclipboard函数，循环结束后这个函数会被最后一次循环的定义覆盖，而且函数里的coord_id变量也会变成最后一行的ID，所以不管点击哪一行的按钮，执行的都是最后一次定义的函数，自然只会复制最后一行内容。

解决方法 #

方法一：给函数传递对应行的ID

把JS函数移出循环，只定义一次，然后在点击事件里传递当前行的input ID：

<!-- 把脚本放在循环外面，只加载一次 -->
<script>
function copytoclipboard(coordId) {
  var copyText = document.getElementById(coordId);
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* 适配移动端 */
  navigator.clipboard.writeText(copyText.value);
  alert("Coordinates copied to clipboard: " + copyText.value);
}
</script>

<?php
if (mysqli_num_rows($result) > 0) { 
    while($row = mysqli_fetch_array($result)) { 
        $rowId = 'Row' . $row['Row']; 
        echo '<tr>
                <td align="center">' . $row["Row"] . 
                '<input type="text" value="' . $row['Row'] . '" id="' . $rowId . '" hidden="true" />' .
                '<img src="clipboard.png" height="20px" onclick="copytoclipboard(\'' . $rowId . '\')" />' .
                '</td>
              </tr>';
    }
} else {
    echo "there was a problem<br />";
}
?>

方法二：通过DOM元素关系获取目标input（更简洁，无需ID）

不需要给input设置ID，直接通过点击的按钮找到它前面的input元素：

<script>
function copytoclipboard(btn) {
  // 获取按钮的前一个兄弟元素（即当前行的hidden input）
  var copyText = btn.previousElementSibling;
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* 适配移动端 */
  navigator.clipboard.writeText(copyText.value);
  alert("Coordinates copied to clipboard: " + copyText.value);
}
</script>

<?php
if (mysqli_num_rows($result) > 0) { 
    while($row = mysqli_fetch_array($result)) { 
        echo '<tr>
                <td align="center">' . $row["Row"] . 
                '<input type="text" value="' . $row['Row'] . '" hidden="true" />' .
                '<img src="clipboard.png" height="20px" onclick="copytoclipboard(this)" />' .
                '</td>
              </tr>';
    }
} else {
    echo "there was a problem<br />";
}
?>

两种方法都能解决问题，方法二更简洁，不需要维护唯一ID，推荐使用。

内容的提问来源于stack exchange，提问作者Mikeoftulsa