将行的id转换为模态

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>

表格看起来与此类似

现在我被卡住的部分是我也希望携带相应详细按钮用户点击模式的行的请求，这样如果用户点击第一行的细节，模态显示第一行的数据行，当用户点击第二行的细节时，模态显示第二行的数据，依此类推......

模态代码是

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

<击>

Answer 2

在按钮

中添加data-id =“行的id”

<button data-id="id of the row" class="btn btn-drank mb-10" data-toggle="modal"  data-target="#myModal2">Detail</button >

将表单标记和输入类型隐藏在该表单中。

<div id="myModal2" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">                           
                        </div>
                        <div class="modal-footer">
                            <form >
                                <input type="hidden" id="id">
                                <button type="submit" class="btn btn-danger">Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div> 

然后在脚本中使用事件show.bs.modal

执行此操作

$(document).ready(function () {
        $('#myModal12').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);//Button which is clicked
            var clickedButtonId= button.data('Id');//Get id of the button
          // set id to the hidden input field in the form.         
           $("input #id").val(clickedButtonId);
    }); 

Answer 3

您可以为show.bs.modal添加一个监听器，以便您引用用户点击的组件和模式，如documentation中所述。

$('#myModal2').on('show.bs.modal', function (e) {
    var modal = $(this);
    var rowBtn = $(e.relatedTarget);
    var row = rowBtn.closest('tr');
    // Here you id for the clicked row
    var rowId = row.find('td:first').text();
    row.find('td').each(function(){
        // Here you can iterate between each row cell
        var cellCont = $(this).text();
        // e.g. use cellCont to create modal content
    });
    // Here you can update modal content
    // e.g. modal.find('.modal-body').html( your dynamic content );
});