Stack Overflow en español Asked by jacd on November 20, 2021
Tengo un problema al traer valores de una tabla dinámica en jsp, me explico:
Primero obtengo todos los valores de mi base de datos a una tabla, con un for:
<table id="table" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>ID motivo</th>
<th>Fecha solicitud</th>
<th>Fecha Inicio</th>
<th>Fecha Fin</th>
<th>ID plan</th>
</tr>
</thead>
<tbody>
<%
for (int i = 0; i < listaraplazo.size(); i++) {
VO.VOAplazamiento aplazo = listaraplazo.get(i);
VO.VOMotivo_aplazo motivo = motivoA.get(i);
VO.VOAplazamiento xd2 = xd.get(i);
%>
El for queda abierto para recorrer y traer los datos:
<tr style='cursor: pointer' id="primerafila">
<td><%= aplazo.getId_aplazamiento() %></td>
<td><%= motivo.getMotivo() %></td>
<td><%= aplazo.getFechaSolicitud() %></td>
<td><%= aplazo.getFechaInicio() %></td>
<td><%= aplazo.getFechaFin() %></td>
<td><%= xd2.getId_plan().getIdPlan() %></td>
</tr>
<%
}
%>
</tbody>
Al seleccionar cada fila logré que me abriera un modal al dar click en ella:
<script>
document.getElementById("table").onclick=function(e){
$('#myModal').modal('show');
}
</script>
</table>
Lo que yo quiero hacer es que al seleccionar una fila me traiga los datos al modal , sea por id o por lo que sea, es decir que tengo los datos en la fila, pero que me traiga los datos de la fila que yo seleccione al modal.
Con un ejemplo simple de obtener valores de tablas dinámicas también me ayudaría mucho.
Creo que se puede hacer con javascript, pero no sabría como.
Por favor agradezco su ayuda de antemano 🙁
Se puede hacer con jQuery de la siguiente forma:
jQquery
$(".box").click(function(){
$(".modal").modal('show');
var value = "";
$(this).parents("tr").find("td").each(function() {
value += '<div>' + $(this).text() + '</div>';
});
$(".modal-body").html(value);
});
Considerar que tienen que hacer click a la clase ".box"
HTML:
<table>
<tr>
<td>
<span class="box">ID 1</span>
</td>
<td>
Luis
</td>
<td>
Lastname
</td>
<td>
Peru
</td>
</tr>
<tr>
<td class="box">
<span class="box">ID 2</span>
</td>
<td>
Maria
</td>
<td>
Lastname
</td>
<td>
Chile
</td>
</tr>
<tr>
<td class="box">
<span class="box">ID 3</span>
</td>
<td>
Jose
</td>
<td>
Lastname
</td>
<td>
Bolivia
</td>
</tr>
<tr>
<td class="box">
<span class="box">ID 4</span>
</td>
<td>
Marco
</td>
<td>
Lastname
</td>
<td>
Ecuador
</td>
</tr>
</table>
<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
EJEMPLO:
Answered by Raul on November 20, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP