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>`
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?
button
"Retira Tutor 3" obtenerdata.nombre3
e imprimirlo (imagino) en elinput
#tutor
?${data.nombre3}
me lo muestre en el input del formulario de la ventana modal#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"
.