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">jsmith@whatever.com</td>
    <td><button>Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td id="email">ejackson@whatever.com</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() 不是有效函数”的错误消息。我一直在关注使用这种方法的几个教程，所以我不确定为什么它在这里不起作用。

Answer 1

正如 Robin Zigmond 所说，您需要更改id="email"为class="email"才能找到正确的 TD，并且因为每个 id 必须是唯一的。

完成此操作后，您可以通过编程方式向每个按钮添加事件侦听器，并在侦听器中查找带有电子邮件类名的电子邮件 TD。

选择文本仅适用于可以有文本输入的元素（即textarea和input type="text"），因此您需要创建一个临时元素来放入文本，并从那里复制它。

(function()
{
  let buttons = document.getElementsByTagName('Button');
  for(let i = 0; i < buttons.length; i++)
  {
    let button = buttons[i];
    button.addEventListener('click', e =>
    {
      let button = e.target;
      let email = button.parentNode.parentNode.getElementsByClassName('email')[0].innerHTML;
      let text = document.createElement('input');
      text.setAttribute('type', 'text');
      text.value = email;
      document.body.appendChild(text);
      text.select();
      document.execCommand('copy');
      document.body.removeChild(text);
    });
  }
})();

<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 class="email">jsmith@whatever.com</td>
    <td><button>Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td class="email">ejackson@whatever.com</td>
    <td><button>Click to Copy</button></td>
  </tr>
</table>

Answer 2

我已经修改了您的 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">jsmith@whatever.com</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td data-type="email">ejackson@whatever.com</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve1</td>
    <td>Jackso1n</td> 
    <td data-type="email">ejackssdfon@whafdstever.com</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve2</td>
    <td>Jackson2</td> 
    <td data-type="email">asdas@whasdftever.com</td>
    <td><button data-type="copy">Click to Copy</button></td>
  </tr>
</table>

这个来源也很有帮助来源