Question

我有一个表，其中包含数据库中的多行，并且我想有一个图标，为每条记录提供删除选项。我使用this tutorial创建了动态内容模式，但是现在我的问题是如何为不同的行设置单独的模式？

一种方法（似乎不可行）是使用PHP动态创建模态（对于每一行，产生单独的模态），但我相信应该有某种方法可以通过传递id来打开一个模态或类似的内容，并根据该ID显示自定义内容，然后再删除该行。

有人可以帮我更改教程中的代码以反映需求吗？

这是我的代码： PHP

            <button type="button" class="btn btn-success openBtn" id="1">Open Modal</button>

            <button type="button" class="btn btn-success openBtn" id="2">Open Modal 2</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" 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">Bootstrap Modal with Dynamic Content</h4>
                        </div>
                        <div class="modal-body">

                        </div>
                        <div class="modal-footer">
                            <form method="POST" action="delete.php" class="form-horizontal">
                                <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
                                <button type="submit" class="btn btn-primary">confirm</button>
                                <input type="hidden" name="id" value="<?=$id?>">
                                <input type="hidden" name="resource" value="<?=$section?>">
                            </form>
                        </div>
                    </div>

                </div>
            </div>

JS

$('.openBtn').on('click',function(){
var id = $(this).attr('id');
$('.modal-body').load('getContent.php?id='+id,function(){
    $('#myModal').modal({show:true});
});

Answer 1

将删除button放入table td中。在PHP循环运行时，将删除按钮添加到每一行。

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <td>Delete</td>
        </tr>
    </thead>
    <!--php code-->
    <!--start php loop-->

    <tr>
        <td>Data</td>
        <td>Data</td>
        <!--Modal Trigger Buton-->
        <td><button>Delete</button></td>
    </tr>
</table>
<!--BootstrapModal Goes Here-->

如何为每行单独设置Bootstrap模式？

1 个答案: