es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • JavaScript obtiene datos de la celda de una tabla HTML y los inserta en un campo de entrada.
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esta funcionalidad, podemos usar jQuery para escuchar los clics en los elementos td dentro de la tabla. Cuando se hace clic en un elemento td, podemos obtener su contenido de texto y establecerlo como el valor del input.

    Aquí tienes un ejemplo de código:

    <!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <input type="number" id="my-input">
    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
        </tr>
        <!-- más filas... -->
      </tbody>
    </table>
    <script>
      $(document).ready(function() {
        // Escuchar eventos de clic en elementos td dentro de la tabla
        $('table td').click(function() {
          // Obtener el contenido de texto del elemento td clicado
          var tdText = $(this).text();
          // Establecer el valor del input como el texto del td
          $('#my-input').val(tdText);
        });
      });
    </script>
  </body>
</html>

    En este ejemplo, escuchamos los clics en todos los elementos td dentro de la table utilizando el método click() de jQuery. Cuando se hace clic en un td, obtenemos su texto usando el método text() de jQuery y lo establecemos como el valor del elemento input usando val().

    Ten en cuenta que deberás reemplazar #my-input con el ID de tu elemento input. Además, si tu tabla se genera de forma dinámica, es posible que necesites usar el método on() de jQuery en lugar de click() para asegurarte de que los eventos de clic se registren correctamente.

Comments are closed.