我有一个从数据库动态填充的表,其中有一个按钮,单击该按钮我希望显示模式,因为工作是在 Bootstrap 中完成的,因此创建模式并不困难。
<table id="report" class="table table-bordered" >
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<?
$sql="SELECT * from `request` ";
$result= mysqli_query($con, $sql);
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_assoc($result))
{
$requestid = $row['requestid'];
?>
<tr>
<td><? echo $requestid; ?> </td>
<td><div href="javascript:;" class="btn btn-drank mb-10" data-toggle="modal" data-target="#myModal2">Detail</div></td>
<td> </td>
<td> </td>
</tr>
<?}
}
</table>
表格看起来与此类似
现在我陷入困境的部分是我还希望将用户单击了相应详细信息按钮的行的 requestid 传递到模态,这样如果用户单击第一行的详细信息,模态将显示第一行的数据行,当用户点击第二行的详细信息时,模态显示第二行的数据,依此类推。
模态代码是
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Details</h4>
</div>
// wish to get the request id and once i have it i can use it to fetch data
</div>
</div>
</div>
最佳答案
更新
在顶部添加此更新是因为我觉得这会是更优雅和最简单的方法。
不需要第1步和第2步,即 global variable
和click event
对于 modal invoker
。你可以只拥有shown.bs.modal
方法并得到sourceElement
即调用 modal
的元素,并获取 id
对应于row
如下:
$("#myModal2").on('shown.bs.modal',function(e){
var sourceElement=e.relatedTarget;
/*e.relatedTarget gives you which element invoked modal*/
var id=$(sourceElement).closest('tr').find("td:first").text();
/*using sourceElement you can easily fetch id
alert(id);
})
<小时/>
<强> DEMO
3步:
- 有一个全局变量来存储
id
- 点击事件全部
div
谁的data-target="#myModal"
获取点击row
的 ID - 利用模态的
shown.bs.modal
获取id
在click
期间获得事件
第 1 步
var id=0; /*a global variable*/
第 2 步
$("div[data-target=#myModal2]").on('click',function(){
id=$(this).closest('tr').find("td:first").text();
/*get the closest tr of clicked div and find first td which has id value and store it in
id variable*/
})
第3步
$("#myModal2").on('shown.bs.modal',function(e){
alert(id);
/*since id is a global variable and it will get value as soon as click occurs
Fetch the data with above id*/
})
罢工><罢工>罢工>
关于javascript - 携带一行的id到modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34675413/