javascript - 如何动态更改模态内容?
问题描述
我有数据库列表网页,其中列出了有关数据库中内容的各种信息。我也有显示与其内容相关的链接的模式。桌子
正如你从图片中看到的,我有一个模型,每个模态体都包含一个像“/upload/something.pdf”这样的链接,所以当我单击模态时,它会直接显示文档。现在我需要它来显示多个文件。每个链接都有自己的数据库条目,但我不知道每次按下模式底部的数字按钮时如何更改模式。我想按 1-2-3,它会根据存储在数据库中的链接更改内容。
这是我的HTML代码
</div>
<div class="container">
<table class="table table-bordered">
<thead class="thead-dark">
<tr class="bg-primary text-white">
<th>ID</th>
<th>Description</th>
<th>Location</th>
<th>Cost</th>
<th>Date</th>
<th>Category</th>
<th>File</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="dtBasicExample">
<?php
if(count($userData)>0){
$s = '';
foreach($userData as $val){
$s++;
if( $val['currency'] == "TL"){
$total= $total+ $val['cost'];
}
if( $val['currency'] == "$"){
$total_usd=$total_usd+ $val['cost'];
}
?>
<?php
$slash = "/";
$date = $val['day'] .$slash .$val['month'] .$slash .$val['year'] ;
$link = "uploads" .$slash . $val['file'];
?>
<tr>
<td><?php echo $val['id'];?></td>
<td><?php echo $val['description'];?></td>
<td><?php echo $val['location'];?></td>
<td><?php echo $val['cost'];if ($val['currency'] == "TL"){echo "₺";} else { echo $val['currency'];}?></td>
<td><?php echo $val['datee'];?></td>
<td><?php echo $val['type'];?></td>
<td><?php
if ($val['file']!= NULL){
echo
'<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal_' . $val['id'] . '">
Details
</button>';
}
else {
echo '<button type="button" class="btn btn-primary " disabled>Details</button>';
}
?>
</td>
<div id="MyModal_<?php echo $val['id']?>" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" style="max-width: 90%;" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title"><h3>Preview </h3></div>
</div>
<div class="modal-body">
<embed src="<?php echo $link?>" width="850" height="720" />
</div>
<div class="modal-footer">
<form method="post" action="admin_view">
</form>
<button type="button" id ="one" class="btn btn-default" >1</button>
<button type="button" id="two" class="btn btn-default" >2</button>
<button type="button" id="three" class="btn btn-default" >3</button>
<button type="button" class="btn btn-default" >Download</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<!-- <td id="a1"><a target="_blank" rel="noopener noreferrer" href="<?php echo $link?>" class="text-primary"> Click</a>-->
<td align="center">
<a href="edit-cost.php?editId=<?php echo $val['id'];?>" class="text-primary"><i class="fa fa-fw fa-edit"></i> Edit</a> |
<a href="delete.php?delcostId=<?php echo $val['id'];?>" class="text-danger" onClick="return confirm('Are you sure to delete this record?');"><i class="fa fa-fw fa-trash"></i> Delete</a> |
</td>
</tr>
<?php
}
}else{
?>
<tr><td colspan="8" align="center">No Record(s) Found!</td></tr>
<?php }
?>
</tbody>
</table>
<p style="text-align: left;"><?php echo "Total ₺="; echo $total; ?></p>
<p style="text-align: left;"><?php echo "Total $="; echo $total_usd; ?></p>
</div> <!--/.col-sm-12-->
</div>
``
解决方案
推荐阅读
- mysql - SQL - 在一组行中选择全部或全部
- php - PHP - 根据键值对将一个数组拆分为 2 个数组
- google-cloud-composer - 添加与 gdrive 范围的 BigQuery 连接?
- c++ - 模板模板参数在什么情况下有用?
- hibernate - kotlin 中的注释数组
- python - 如何同时对熊猫数据框中的列进行排序
- javascript - 尝试通过“touchstart”在触摸屏上启动涟漪效应
- java - Java - JPA/Hibernate:“MappingException:无法确定类型”
- jenkins - Jenkins 构建失败,Cobertura 错误
- node.js - 如何在中间容器中使用 NPM 配置文件?