如何修改JS复制脚本实现Gravity View表格每行输入框内容单独复制

原有代码使用document.getElementById('oldone')获取目标输入框，但HTML要求id属性全局唯一，所以无论触发哪一行的复制操作，始终只会匹配到页面中第一个id为oldone的元素，因此只能复制第一行的内容。

核心思路是放弃用id定位输入框，改为通过触发复制操作的元素，联动定位到当前行对应的输入框。

第一步：调整DOM标识 #

给所有行中需要复制的输入框统一添加相同的class名（例如copy-target），不要复用相同id。

第二步：修改复制函数 #

function copyToClipBoards(trigger) {
  // 找到当前点击按钮所属的行容器，再定位该行的目标输入框
  // 如果你用的行容器不是tr，就把closest的参数换成对应容器的class，比如closest('.gv-row')
  const targetInput = trigger.closest('tr').querySelector('.copy-target');
  targetInput.select();
  document.execCommand('copy');
  alert("Copied!");
}

第三步：调整复制按钮的触发逻辑 #

把每个复制按钮的点击事件绑定改为传入当前元素本身，示例：

<button onclick="copyToClipBoards(this)">复制</button>

document.execCommand已经被官方弃用，建议使用兼容性更好的现代Clipboard API实现：

async function copyToClipBoards(trigger) {
  const targetInput = trigger.closest('tr').querySelector('.copy-target');
  try {
    await navigator.clipboard.writeText(targetInput.value);
    alert("Copied!");
  } catch (err) {
    // 旧浏览器降级兼容
    targetInput.select();
    document.execCommand('copy');
    alert("Copied!");
  }
}

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