Копирование Javascript в буфер обмена нескольких элементов
Я пытаюсь добавить возможность нажимать на текст внутри элементов таблицы и копировать его в буфер обмена. У меня он работает, но он работает только с первым элементом на странице.
Код выглядит следующим образом:
const td = document.querySelector("td");
td.onclick = function() {
document.execCommand("copy");
}
td.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData("text/plain", td.textContent);
console.info(event.clipboardData.getData("text"))
}
});<table><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>Если щелкнуть Данные 1, они будут скопированы в буфер обмена, как и ожидалось, однако другие элементы (в этом примере Данные 2 и Данные 3) не копируются.
Использование document.querySelector получает только первый элемент, поэтому я думаю, что, возможно, моя основная проблема, но использование document.querySelectorAll ломает все.
На каждой странице разное количество элементов td, поэтому я не могу указать количество элементов, с которыми может потребоваться работа.
Как лучше всего решить проблему?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Во-первых, вам нужно выбрать все элементы td, например: document.querySelectorAll("td");
Затем вам нужно перебрать их все:
document.querySelectorAll("td").forEach(td => {...});
Это дает нам что-то вроде этого:
const tds = document.querySelectorAll("td");
tds.forEach(td => {
td.onclick = function() {
document.execCommand("copy");
}
td.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData("text/plain", td.textContent);
console.info(event.clipboardData.getData("text"))
}
});
})<table><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>