我来帮你搞定这个需求！咱们用更现代的技术实现，既靠谱又适配移动端，具体方案如下：

核心思路 #

• 替换已废弃的document.execCommand("copy")，用现代的navigator.clipboard.writeText处理复制（兼容性更好、更安全）
• 点击/触摸单元格时，先提取内容复制到剪贴板
• 动态创建一个"Copied"提示框，定位在点击位置附近
• 1秒后自动移除提示框，避免页面残留元素

完整代码（包含样式+逻辑） #

/* Tooltip样式，可根据需求自定义 */
.copy-tooltip {
  position: fixed;
  background-color: rgba(30, 30, 30, 0.9);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 9999;
  animation: fadeInOut 1s ease-in-out forwards;
}

/* 淡入淡出动画，让提示更自然 */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

const tds = document.querySelectorAll("td");

tds.forEach(td => {
  // 给单元格添加可点击的视觉提示
  td.style.cursor = "pointer";
  td.style.userSelect = "none";

  td.addEventListener("click", async function() {
    const cellText = this.textContent.trim();
    
    try {
      // 复制文本到剪贴板
      await navigator.clipboard.writeText(cellText);
      
      // 创建提示框元素
      const tooltip = document.createElement("div");
      tooltip.className = "copy-tooltip";
      tooltip.textContent = "Copied";
      
      // 计算提示框的定位（在单元格上方居中显示）
      const cellRect = this.getBoundingClientRect();
      tooltip.style.left = `${cellRect.left + cellRect.width / 2 - tooltip.offsetWidth / 2}px`;
      tooltip.style.top = `${cellRect.top - 35}px`;
      
      // 添加到页面
      document.body.appendChild(tooltip);
      
      // 1秒后自动移除提示框
      setTimeout(() => {
        tooltip?.remove();
      }, 1000);
      
    } catch (err) {
      console.error("复制失败:", err);
      // 可选：复制失败时显示错误提示
      const errorTooltip = document.createElement("div");
      errorTooltip.className = "copy-tooltip";
      errorTooltip.textContent = "Copy failed";
      document.body.appendChild(errorTooltip);
      setTimeout(() => errorTooltip.remove(), 1000);
    }
  });
});

代码说明 #

1. 样式部分：用固定定位确保提示框不会随页面滚动偏移，动画效果让提示的出现和消失更流畅
2. 逻辑部分：
   • 给所有单元格添加点击事件，移动端触摸操作也能触发click事件，无需额外处理
   • 用异步的剪贴板API复制内容，比旧方法更可靠，还能处理复制失败的情况
   • 动态计算提示框的位置，确保显示在点击单元格的正上方，不会偏离视线
   • 用定时器自动清理提示框，避免页面元素堆积

可选优化 #

• 如果页面单元格很多，可以提前创建一个隐藏的提示框元素，点击时修改内容、显示并设置位置，1秒后再隐藏，这样性能更好
• 可以自定义提示框的样式，比如修改背景色、字体大小、动画时长等

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