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 /
  • ¿Cómo puedo copiar el texto/números de una columna td de una tabla al valor de entrada de otra columna td utilizando jQuery?

¿Cómo puedo copiar el texto/números de una columna td de una tabla al valor de entrada de otra columna td utilizando jQuery?

17 Jun, 2023 Programación

Cuando haga clic en el botón “Copiar”, los números de la columna verde derecha deben copiarse al valor del input de la fila correspondiente/relacionada. Los ids de fila e input son dinámicos. Necesito una función jQuery para hacerlo y no sé cómo. Tengo cientos de filas, pero he elegido solo 3 como ejemplo. Gracias.

function copyQty() {

}

.available-qty {
  background-color: green;
  padding: 4px;
  color: white;
  margin-left: 10px;
}

.copy-qty-btn {
  margin-bottom: 20px;
}

<table>
    <thead>
        <button class="btn copy-qty-btn" onclick="copyQty();">Copiar</button>
    </thead>

    <tbody>
        <!-- fila con id dinámico -->
        <tr id="row_dynamic_1">
            <td>
                <!-- input con id dinámico -->
                <input type="text" name="max_qty_dynamic_1" id="max_qty_dynamic_1" value="aquí debe haber 3 después del clic">
            </td>
            <td>
                <span class="available-qty">3</span>
            </td>
        </tr>
        <!-- fila con id dinámico -->
        <tr id="row_dynamic_2">
            <td>
                <!-- input con id dinámico -->
                <input type="text" name="max_qty_dynamic_2" id="max_qty_dynamic_2" value="aquí debe haber 4 después del clic">
            </td>
            <td>
                <span class="available-qty">4</span>
            </td>
        </tr>
        <!-- fila con id dinámico -->
        <tr id="row_dynamic_3">
            <td>
                <!-- input con id dinámico -->
                <input type="text" name="max_qty_dynamic_3" id="max_qty_dynamic_3" value="aquí debe haber 5 después del clic">
            </td>
            <td>
                <span class="available-qty">5</span>
            </td>
        </tr>

    </tbody>
</table>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para copiar el valor de la columna verde de la derecha en la entrada de la fila correspondiente cuando se hace clic en el botón “Copiar”, se puede utilizar la siguiente función de jQuery:

    function copyQty() {
  $('tbody tr').each(function() {
    var qty = $(this).find('.available-qty').text();
    var inputId = $(this).find('input[type="text"]').attr('id');
    $('#' + inputId).val(qty);
  });
}

    Esta función recorre cada fila del cuerpo de la tabla y, para cada fila, encuentra el valor de texto de la columna verde de la derecha y la identificación del campo de entrada en la columna izquierda. Luego, establece que el valor del campo de entrada sea el mismo que el valor de texto de la columna verde de la derecha.

    Tenga en cuenta que el código utiliza selectores de jQuery para seleccionar los elementos relevantes y realizar las operaciones necesarias. También supone que la tabla tiene solo un cuerpo de tabla y que los campos de entrada tienen su atributo de identificación establecido en un valor que comienza con “max_qty_dynamic_” y un número que lo sigue.

Comments are closed.