0

Estoy trayendo un array de datos con JSON, el cual muestro en diferentes celdas de una tabla en HTML, tal como se muestra abajo:

  contenido.innerHTML = ''
                                        contenido.innerHTML =  `
                                          <tr>
                                                <td id="mat" style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.matricula}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.nombre}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.nivel}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.grado}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.grupo}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><img src="${data.foto}"  height="100px" width="100px"/></td>
                                          </tr>`

      contenido1.innerHTML =  `
                                          <tr>
                                                <td id="nom" style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.nombre1}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><img src="${data.foto1}"  height="100px" width="100px"/></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.nombre2}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><img src="${data.foto2}"  height="100px" width="100px"/></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><b>${data.nombre3}</b></td>
                                                <td style="text-align: center; background-color: #6FF2AB; color: BLACK;"><img src="${data.foto3}"  height="100px" width="100px"/></td>
                                          </tr>`  

Aunado a esto, también me pinta unos botones, con los cuales mando llamar una ventana modal donde está el formulario con los input:

     cabecera3.innerHTML =  `
                                        <tr style="text-align: center; background-color: green; color: white;">
                                          <th scope="col"><button class="btn btn-danger addret" type="button" value="${data.matricula}"  data-toggle="modal"  data-target="#ret">Retira Tutor 1</button></th>
                                          <th scope="col"></th>
                                          <th scope="col"><button class="btn btn-danger addret" type="button" value="${data.matricula}"  data-toggle="modal"  data-target="#ret">Retira Tutor 2</button></th>
                                          <th scope="col"></th>
                                          <th scope="col"><button class="btn btn-danger addret" type="button" value="${data.matricula}"  data-toggle="modal"  data-target="#ret">Retira Tutor 3</button></th>
                                          <th scope="col"></th>
                                        </tr>`    

Ventana modal: introducir la descripción de la imagen aquí

Código JS para que el botón pintado con la tabla me muestre modal e imprimir datos del array en los input:

    $(document).ready(function(){
$(document).on('click', '.addret', function(){
    var id=$(this).val();
    var first=$('#nom'+id).text();
    var mat=$('mat'+id).text();

    $('#ret').modal('show');
    $('#enombre').val(first);
    $('#ematricula').val(mat);  
});
});

Mi pregunta es: ¿Cómo puedo enviar estos datos (o para ser más especifico, enviar o imprimir, por ejemplo, este ${data.nombre1}) en un input del formulario HTML de la ventana modal?

9
  • Valla el formulario con los input los tengo en una ventana modal, la cual mando llamar con un botón que me pinta junto con la tabla Commented el 3 feb. 2022 a las 20:50
  • Listo @Marcos ya coloque mas código, espero darme a entender Commented el 3 feb. 2022 a las 20:57
  • A ver si entendí. ¿Quisieras que, por ejemplo, al tocar el button "Retira Tutor 3" obtener data.nombre3 e imprimirlo (imagino) en el input #tutor?
    – Marcos
    Commented el 3 feb. 2022 a las 21:04
  • exacto! @Marcos estoy intentando que ${data.nombre3} me lo muestre en el input del formulario de la ventana modal Commented el 3 feb. 2022 a las 21:06
  • No veo donde has creado los elementos #matricula[ID] ni #nombre[ID], etc.. Se me ocurre que la solución que podrias aplicar sería identica, crear #tutor[ID]. En el caso que quisieras que no sea visible, podrías usar un <input type="hidden".
    – Marcos
    Commented el 3 feb. 2022 a las 21:15

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.