Estou tentando passar informações que estão dentro de uma tabela para um modal. Atualmente o que tenho é uma função simples que exibe na tela um link e ao clicar nela, abre outra página com uma imagem QR. Queria deixar isso mais dinâmico e fazer com que se abra em um modal.
Fiz algumas tentativas, e vi bastante coisa no Tec. Google, mas não consegui adaptar para meu código. Se puderem me dar essa ajuda, agradeço demais!
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Código atual:
<div class="container">
<div class="row">
<div class="table-responsive text-center">
<table class="table table-hover table-dark" id="alist">
<thead>
<tr>
<th scope="col"><?php echo $lang['WALLET_ADDRESS']; ?></th>
<th scope="col"><i class="fas fa-qrcode" style="font-size: 30px"></i></th>
</tr>
</thead>
<tbody>
<?php
foreach ($addressList as $address)
{
echo "<tr><td>".$address."</td>";?>
<td><a href="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>">
<img src="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>" alt="QR Code" style="width:42px;height:42px;border:0;"></td></tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
Minha tentativa:
<div class="container">
<div class="row">
<div class="table-responsive text-center">
<table class="table table-hover table-dark" id="alist">
<thead>
<tr>
<th scope="col"><?php echo $lang['WALLET_ADDRESS']; ?></th>
<th scope="col"><i class="fas fa-qrcode" style="font-size: 30px"></i></th>
</tr>
</thead>
<tbody>
<?php
foreach ($addressList as $address)
{
echo "<tr><td>".$address."</td>";?>
<td>
<a href="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>" class="btn" role="button" data-toggle="modal" data-target="#qrcode_modal"><i class="fas fa-qrcode" style="font-size: 30px;color:white;border:0;"></i></a></td></tr>
<?php
}
?>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="qrcode_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-qrcode" style="font-size: 20px"></i>QRCODE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="<?php echo $server_url;?>qrgen/?address=<?php echo $address;?>" style="width: 120px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Na minha tentativa o modal exibe apenas a informação de 1 dado, o foreach não funciona, ou seja, independente da linha que eu clique para exibição, sempre vai mostrar apenas o QR referente a 1 endereço.
Imagem da minha tentativa: