如何正确克隆DOM节点实现点击复制对应行UID到剪贴板

HTML 标准规定同一页面中id属性必须全局唯一，你在PHP循环输出表格行时，给每一行的UID单元格、复制按钮都设置了相同的固定id，JS通过id选择器获取元素时，永远只会返回页面中第一个匹配的节点，这就是点击任意复制按钮都只能拿到第一行UID的核心原因。

不需要额外克隆DOM节点，只需要通过DOM相对定位，从当前点击的按钮出发，向上找到所属的表格行，再在当前行范围内查找对应的UID单元格即可，完全不会出现行匹配错位的问题，具体修改如下：

• 移除PHP循环中重复写死的id="inf_copy"、id="btn_copy"属性，改用class标识可复用的UID单元格和复制按钮，避免id重复违规。
• 事件绑定从id选择器改为class选择器，保证每一行的复制按钮都能绑定上点击事件。
• 点击事件触发时，通过$(this).closest('tr')定位到当前按钮所在的表格行，再在当前行范围内查找UID单元格，取到对应内容后先做加密处理，再写入剪贴板。
• 剪贴板写入优先使用现代标准的navigator.clipboardAPI，无需插入临时DOM元素，同时保留旧版document.execCommand作为降级兼容。

代码修改 #

PHP循环部分调整 #

把原来循环内的UID单元格、复制按钮代码替换为如下内容：

<tr>
    <td><?=$stt++?></td>
    <td><?=$row['id']?></td>
    <td class="inf-copy-cell"><?=$row['uid_new']?></td>
    <td><?=$row['date_create']?></td>
    <td>
        <a href='#' class="btn btn-info" style="width: 100px;">Edit</a>
        <a href='./config/delete.php/?id=<?=$row['id']?>' class="btn btn-success" style="width: 100px;">Delete</a>
        <button class="btn btn-warning btn-copy" style="width: 100px;">Copy</button>
    </td>
</tr>

JS逻辑部分调整 #

把原来的复制按钮点击事件代码替换为如下内容：

$('.btn-copy').on('click', async function() {
    // 定位当前点击按钮所属的表格行
    const $currentRow = $(this).closest('tr');
    // 获取当前行的UID原始内容
    const rawUid = $currentRow.find('.inf-copy-cell').text().trim();

    // 替换为你自己的加密逻辑，示例为base64编码做演示
    const encryptedData = btoa(rawUid);

    const $uidCell = $currentRow.find('.inf-copy-cell');
    // 剪贴板写入逻辑，优先用现代API，降级兼容旧浏览器
    try {
        await navigator.clipboard.writeText(encryptedData);
    } catch (e) {
        const $tempInput = $('<input>').val(encryptedData).appendTo('body').select();
        document.execCommand('copy');
        $tempInput.remove();
    }

    // 给当前行UID单元格加高亮反馈
    $uidCell.css({
        'background': 'yellow',
        'font-weight': 'bold'
    });
    // 2秒后自动移除高亮
    setTimeout(() => {
        $uidCell.css({
            'background': '',
            'font-weight': ''
        });
    }, 2000);
});

提示：如果你的加密逻辑是异步的，只需要在加密步骤前加await等待加密完成，再走后续剪贴板写入流程即可，定位逻辑不需要改动。

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