javascript - 携带一行的id到modal

Question

我有一个从数据库动态填充的表，其中有一个按钮，单击该按钮我希望显示模式，因为工作是在 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">&times;</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>  

Answer 1

更新

在顶部添加此更新是因为我觉得这会是更优雅和最简单的方法。

不需要第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);
})

Updated DEMO

<小时/>

<强> 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*/
})

<罢工>