Soy principiante en JavaScript y no se como solucionar este problema. He creado una tabla basada en mi base de datos en MySQL. Y ahora quiero copiar una de sus celdas con el botón de copiar. Pero mi función solo copia la primera celda. Sé que tengo que darle a mi texto diferentes identificaciones, pero no sé cómo. Aquí está mi código:
<tr> <td class="ttd"> </td> <td class="ttd"><?php echo htmlentities($f['ID']); ?> </td> <td class="ttd"><?php echo htmlentities($f['Invoice_number']); ?> </td> <td class="ttd"><?php echo htmlentities($f['Invoice_date']); ?> </td> <td class="ttd"><?php echo htmlentities($f['Month']); ?> </td> <td class="ttd"><?php echo htmlentities($f['Space_name']); ?> </td> <td class="ttd"><?php echo htmlentities($f['Company_name']); ?> </td> <td class="ttd"><?php echo htmlentities($f['Amount']); ?> </td> <div class="tooltip"> <td class="ttd"> <input type="text" style="display:none;" id="Key" value="hhhhhhh.php?token=<?php echo $current_token['token']; ?>"> <button onclick="myFunction()" >Copy</button> <script> document.forms[0].addEventListener("submit", function(event){ if ( send == 0 ) { event.preventDefault(); } }); function myFunction() { var hidden = document.getElementById("Key"); hidden.style.display = 'block'; hidden.select(); hidden.setSelectionRange(0, 99999) document.execCommand("copy"); alert("Copied the text: " + hidden.value); hidden.style.display = 'none'; } </script> </td> </div> </tr>El problema es que estás usando la misma identificación una y otra vez. Los identificadores deben ser singulares en un documento. Por lo tanto, debe otorgar a cada entrada una identificación única y nombres de función únicos o cambiar su código para buscarlo en función del botón y hacerlo reutilizable.
Debe hacer referencia al elemento que está al lado. Puede usar hermanos o puede mirar el td y encontrar el elemento.
Usar la delegación de eventos para no agregar un montón de controladores de clics al documento.
const tbody = document.querySelector("#myTable tbody"); tbody.addEventListener("click", function (event) { // get clicked button const btnCopy = event.target.closest(".copy"); if (btnCopy) { copyThis(btnCopy); } }); function copyThis(button) { const hiddenInput1 = button.previousElementSibling; console.log(hiddenInput1.value); const hiddenInput2 = button.closest("td").querySelector('input[type="hidden"]'); console.log(hiddenInput2.value); } <table id="myTable"> <tbody> <tr> <td> <input type="hidden" value="1"> <button type="button" class="copy">Copy</button> </td> </tr> <td> <input type="hidden" value="2"> <button type="button" class="copy">Copy</button> </td> </tr> </tbody> </table>Si realmente quieres usar eventos en línea
function copyThis(button) { const hiddenInput1 = button.previousElementSibling; console.log(hiddenInput1.value); const hiddenInput2 = button.closest("td").querySelector('input[type="hidden"]'); console.log(hiddenInput2.value); } <table id="myTable"> <tbody> <tr> <td> <input type="hidden" value="1"> <button type="button" class="copy" onclick="copyThis(this)">Copy</button> </td> </tr> <td> <input type="hidden" value="2"> <button type="button" class="copy" onclick="copyThis(this)">Copy</button> </td> </tr> </tbody> </table>primero, debe eliminar la propiedad de identificación ("clave") de su texto de entrada, porque no debería haber identificaciones duplicadas en un documento.
Luego puede cambiar su js, tomando el elemento de entrada ("clave") por su hermano al botón en el que se hizo clic actualmente.
function myFunction(el) { var hidden = el.previousElementSibling; hidden.style.display = 'block'; hidden.select(); hidden.setSelectionRange(0, 99999) document.execCommand("copy"); alert("Copied the text: " + hidden.value); hidden.style.display = 'none'; } <table> <tr> <td class="ttd"> </td> <td class="ttd">1</td> <td class="ttd">2</td> <td class="ttd">3</td> <td class="ttd">4</td> <td class="ttd">5</td> <td class="ttd">6</td> <td class="ttd">7</td> <td class="ttd"> <input type="text" style="display:none;" value="12321"> <button onclick="myFunction(this)" >Copy</button> </td> </tr> <tr> <td class="ttd"> </td> <td class="ttd">1</td> <td class="ttd">2</td> <td class="ttd">3</td> <td class="ttd">4</td> <td class="ttd">5</td> <td class="ttd">6</td> <td class="ttd">7</td> <td class="ttd"> <input type="text" style="display:none;" value="2222"> <button onclick="myFunction(this)" >Copy</button> </td> </tr> </table>