JS/jQuery: 将td的内容复制到剪贴板

Question

我正在处理一个项目，其中有一个包含名字、姓氏和电子邮件地址的表格。最后一列应该是一个按钮，允许用户将特定人员的电子邮件地址复制到剪贴板。

另外，是的，我知道这是老式 JS，我正在处理一个遗留项目。

这是我的代码：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，但如果列表变得更长，我不知道该如何开始生成它们。 2）我一直收到“copyText.select（）不是有效函数”的错误。我一直在按照几个教程进行操作，在这些教程中使用了此方法，因此我不确定为什么在这里无法工作。

- Leia_Organa

---

第一步是在文档中不要多次使用相同的ID。 - Robin Zigmond

请尝试使用 https://developer.mozilla.org/zh-CN/docs/Web/API/Range/selectNode。 - Vadim Hulevich

@RobinZigmond 那是我另一个问题，我需要获取唯一的ID以生成，这样我就可以单独定位每个元素。 - Leia_Organa

@Leia_Organa，获取元素时不需要ID。 - apple apple

我猜测你在调用 .select() 时出现错误的原因是因为它不是一个输入字段，我认为你不能选择 td 标签的内容。也许你可以将其变成 <input type="text"，然后禁用它，这样用户就不会期望能够编辑它了。 - Martin M

你不需要唯一的ID。如果你将email ID转换成一个类，那么你应该能够根据它作为被点击按钮的兄弟元素来唯一选择它。(获取被点击按钮的最近的<td>祖先元素，然后找到它的带有email类名的后代元素) - Robin Zigmond

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">[e-mail]</td>
    <td><button>Click to Copy</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td class="email">[e-mail]</td>
    <td><button>Click to Copy</button></td>
  </tr>
</table>

- Matt Ellen

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">[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>

这个源码也可以提供帮助，请点这里

- n1md7