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"），因此您需要创建一个临时元素以将文本放入其中并从那里复制。 / p>

(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>

此来源也可以提供帮助source

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

2 个答案: