将行的 id 携带到模态

Question

我有一个从数据库动态填充的表，其中有一个按钮，我希望在其上单击以显示模态，因为工作是在引导程序中完成的，因此创建模态并不困难。

<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

更新

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

不需要 Step 1 和 Step 2，即 global variable 和 click event 代表 modal invoker。您可以只使用shown.bs.modal 方法并获取sourceElement 即调用modal 的元素，然后获取与row 对应的id，如下所示：

$("#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
• 利用modal的shown.bs.modal获取click事件期间获得的id

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