Tengo una tabla con varias columnas y quiero que el usuario pueda copiar texto en una celda haciendo clic en ella. Este es contenido dinámico, por lo que no sé cuál será la ID o la clase en ese momento.
Esto funciona para mí, pero obviamente no funcionará debido a getElementById . ¿Cómo podría hacerlo para que la copia funcione para la celda en la que se hace clic?
function copyAddress() { /* Get the text field */ var copyText = document.getElementById("address"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ navigator.clipboard.writeText(copyText.value); }Hola, si desea copiar el texto en la tabla dinámica, primero deberá seleccionar el elemento. ya que no está seguro de cuál es la clase/identificación, simplemente debe seleccionar el elemento html
digamos que tengo esta tabla y quería seleccionar todo el texto interior dentro de td
<table > <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table>podrías hacer en javascript es
let content = document.querySelectorAll('table tr td'); // Todos los td serán seleccionados y agregados a NodeList
después de eso, querrá convertir esa lista de nodos en una matriz.
let contentArr = Array.from(content) // puedes usar Array.from
luego simplemente recorra todos los elementos que tiene y para cada uno agregue un detector de eventos (haga clic), luego obtenga el texto interno y cópielo en el portapapeles. Puedes comprobarlo aquí Espero que te ayude
contentArr.forEach((element) => { element.addEventListener("click", (e) => { let copyText = e.target.innerText navigator.clipboard.writeText(copyText); }); });EDITAR: vi en uno de los comentarios que así es como detectas el clic
si ese es el caso, ¿la función onclick se agrega automáticamente en el div que desea seleccionar? en caso afirmativo
lo que puedes hacer es
<div onclick="copyAddress(this)"> agregue esta palabra clave dentro de su función
ahora lo que puedes hacer en javascript es
function copyAddress(e) { navigator.clipboard.writeText(e.innerText); // the e is the current element and just get the innerText and copy it to clipboard. }EDITAR:
si este es tu formato
<div onclick="copyAddress(this)"><textarea>text to copy</textarea></div> function copyAddress(e) { const copyText = e.firstChild; copyText.select(); copyText.setSelectionRange(0, 99999); navigator.clipboard.writeText(copyText.value); }Supongo que te refieres a que el nombre de la clase sería diferente. Si es así, podría colocar la clase dinámica dentro de un div estático que no cambiará. Aquello podría funcionar.
function copyAddress() { let childItem = document.getElementById("parentDivName").firstElementChild; /* Obviously you would tweak this to work for you, this is just an idea */ }