javascript - JS/jQuery：将 td 的内容复制到剪贴板

Question

我正在做一个项目，我有一个表格，里面有名字、姓氏和电子邮件地址。最后一个 td 应该是一个按钮，允许用户将该特定人的电子邮件地址复制到剪贴板。

也是的，我知道这是在老式 JS 中，我正在做一个遗留项目。

这是我在 codepen.io 上的代码：https ://codepen.io/anfperez/pen/ZZdwWL

HTML

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>E-mail</th>
    <th>Button</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td id="email">[e-mail]</td>
    <td><button>Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td id="email">[e-mail]</td>
    <td><button>Click to Copy</button></td>
  </tr>
</table>

JS

function copyToClipboard() {
    var copyText = document.getElementById("email")
    copyText.select();
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

所以，我有两个困境：1）如何让每个按钮生成以复制正确的电子邮件地址（不仅仅是一个或全部）？我需要为每个条目分配唯一的 ID，但如果列表变长，我真的不知道如何开始生成这些 ID。

2) 我不断收到“copyText.select() 不是有效函数”的错误消息。我一直在关注几个使用这种方法的教程，所以我不确定为什么它在这里不起作用。

标签： javascriptjqueryselectcopyclipboard

Answer 1

我已经修改了你的 Codepen 代码。

这是一个工作示例。

document.querySelectorAll('button[data-type="copy"]')
  .forEach(function(button){
      button.addEventListener('click', function(){
      let email = this.parentNode.parentNode
        .querySelector('td[data-type="email"]')
        .innerText;
      
      let tmp = document.createElement('textarea');
          tmp.value = email;
          tmp.setAttribute('readonly', '');
          tmp.style.position = 'absolute';
          tmp.style.left = '-9999px';
          document.body.appendChild(tmp);
          tmp.select();
          document.execCommand('copy');
          document.body.removeChild(tmp);
          console.log(`${email} copied.`);
    });
});

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>E-mail</th>
    <th>Button</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td data-type="email">[e-mail]</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td data-type="email">[e-mail]</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve1</td>
    <td>Jackso1n</td> 
    <td data-type="email">[e-mail]</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve2</td>
    <td>Jackson2</td> 
    <td data-type="email">[e-mail]</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
</table>

这个来源也很有帮助