Tengo una página HTML. En la página tengo una table con 8 columnas y 56 filas y una entrada (número).
Cualquiera que sea la celda en la que haga clic, quiero que transfiera el número que contiene a la input . ¿Cómo puedo hacer eso?
Gracias de antemano por su ayuda.
const myInput = document.querySelector('#myInput'); const cells = document.querySelectorAll('#myTable tr td'); cells.forEach(el => el.addEventListener('click', (e) => myInput.value = e.currentTarget.innerText) );Esto es asumiendo html como el siguiente:
<input type="text" id="myInput" value="" /> <table id="myTable"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>Actualización (desglose de lo que estamos haciendo arriba):
Todo lo que estamos haciendo es mantener las cosas realmente simples. Creamos un selector para los elementos que buscamos. Dado que hay varias celdas de tabla, usamos querySelectorAll , que devolverá una matriz de elementos.
Luego simplemente recorremos todos estos elementos y agregamos un detector de eventos de click a cada uno de ellos. El oyente toma el texto interno de la celda y simplemente lo configura en el cuadro de entrada de destino.
Esto podría ampliarse como quieras. Elija mantener esto simple y solo haga lo que se le pide.
¡Espero que ayude!