求助：实现点击表格td元素复制到剪贴板并显示临时提示

给你调整后的完整代码，直接用就能实现需求：

HTML 代码 #

<table>
  <tr><td>A1</td><td>A2</td><td>A3</td></tr>
  <tr><td>B1</td><td>B2</td><td>B3</td></tr>
  <tr><td>C1</td><td>C2</td><td>C3</td></tr>
</table>
<!-- 提示框容器 -->
<div id="copy-toast"></div>

CSS 代码 #

td {
  border: thin solid gray;
  padding: 0.2rem;
  cursor: copy; /* 加鼠标样式，提示可点击 */
}

/* 提示框基础样式 */
#copy-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #333;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

/* 提示框显示状态 */
#copy-toast.show {
  opacity: 1;
  visibility: visible;
}

JavaScript 代码 #

function copy(event) {
  const target = event.target || event.srcElement;
  const copyText = target.innerText || target.textContent;
  
  // 异步处理复制操作，确保成功后再提示
  navigator.clipboard.writeText(copyText)
    .then(() => {
      showToast(`已复制: ${copyText}`);
      // 取消单元格选中状态，避免残留选框
      window.getSelection().removeAllRanges();
    })
    .catch(err => {
      showToast(`复制失败: ${err}`);
    });
}

// 提示框控制函数
function showToast(message) {
  const toast = document.getElementById('copy-toast');
  toast.textContent = message;
  toast.classList.add('show');
  // 3秒后自动隐藏提示框
  setTimeout(() => {
    toast.classList.remove('show');
  }, 3000);
}

// 给所有单元格绑定点击事件
document.querySelectorAll("td").forEach(elem => elem.addEventListener("click", copy));

关键改动说明 #

• 新增固定定位的提示框容器，通过CSS过渡实现淡入淡出的显示效果
• 把复制操作改成异步处理，确保复制成功才显示成功提示，失败也能给出错误反馈
• 单独封装showToast函数，专门处理提示的显示和自动隐藏逻辑
• 给单元格添加cursor: copy样式，让用户直观知道可点击复制

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