JS / jQuery: копирование содержимого td в буфер обмена - PullRequest
Новая
       24

JS / jQuery: копирование содержимого td в буфер обмена

1 голос
/ 02 мая 2019

Я работаю над проектом, в котором у меня есть таблица, полная имен, фамилий и адресов электронной почты. Последний тд должен быть кнопкой, которая позволяет пользователю скопировать адрес электронной почты конкретного человека в буфер обмена.

Также да, я знаю, что это в старой школе 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) как я могу получить каждую кнопку, сгенерированную, чтобы скопировать правильный адрес электронной почты (не только один или все из них)? Мне нужно присвоить уникальные идентификаторы каждой записи, но я не знаю, как начать их генерировать, если список становится длиннее.

2) Я получаю сообщение об ошибке, что «copyText.select () не является допустимой функцией». Я следовал нескольким учебникам, в которых используется этот метод, поэтому я не уверен, почему он здесь не работает.

Ответы [ 2 ]

2 голосов
/ 02 мая 2019

Как говорит Робин Зигмонд, вам нужно изменить id="email" на class="email", чтобы иметь возможность найти правильный TD, и потому что каждый идентификатор должен быть уникальным.

Как только вы это сделаете, вы можете программно добавить прослушиватель событий к каждой кнопке, а внутри слушателя найти 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>
1 голос
/ 02 мая 2019

Я изменил ваш код 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>

Этот источник также может быть полезен источник

...