Question

当我点击删除按钮时，我有一个每个项目的文章表，弹出的确认出现问题是如何传递文章的ID，这样当用户点击确认按钮时，记录将被删除这是表格的代码

<div class="tab-pane" id="article">
    <table id="mytable" class="table table-bordred table-striped">
        <c:forEach items="${articles}" var="o">
            <tr>
                <td>${o.id}</td>
                <td>
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object img-thumbnail" width="100" src="http://cfisinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg" alt="...">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">${o.titre}</h4>
                            ${o.description}
                        </div>
                    </div>
                </td>
                <td>
                    <div class="pull-right">
                        <i class="glyphicon glyphicon-time"></i>${o.date}
                    </div>
                </td>
                <td>
                    <p>
                        <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-placement="top" rel="tooltip">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                    </p>
                </td>
                <td>
                    <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" data-placement="top" rel="tooltip">
                        <span class="glyphicon glyphicon-trash"></span>
                </td>
            </tr>
        </c:forEach>
    </table>

和弹出窗口的代码

<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title custom_align" id="Heading">Delete this
                        entry</h4>
            </div>
            <div>le numero de l'article</div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
                </div>

            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-warning">
                    <span class="glyphicon glyphicon-ok-sign"></span> Yes
                </button>
                <button type="button" class="btn btn-warning">
                    <span class="glyphicon glyphicon-remove"></span> No
                </button>
            </div>
        </div>
    </div>
</div>

Answer 1

这是我的问题的解决方案

表格代码：

        <div class="tab-pane" id="article">
                    <table id="mytable" class="table table-bordred table-striped">
                        <c:forEach items="${articles}" var="o">
                            <tr>
                                <td>${o.id}</td>
                                <td><div class="media">
                                        <a class="pull-left" href="#"> <img
                                            class="media-object img-thumbnail" width="100"
                                            src="http://cfi-sinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg"
                                            alt="...">
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">${o.titre}</h4>
                                            ${o.description}
                                        </div>
                                    </div></td>
                                <td><div class="pull-right">
                                        <i class="glyphicon glyphicon-time"></i>${o.date}
                                    </div></td>

                                <td><p>
                                        <button class="btn btn-primary btn-xs" data-title="Edit"
                                            data-toggle="modal" data-target="#edit" data-placement="top"
                                            rel="tooltip">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                    </p></td>
                                <td>
                                    <button class="open-deleteDialog btn btn-danger btn-xs"
                                        data-title="Delete" data-toggle="modal"
                                        data-target="#delete-article" data-placement="top"
                                        data-id="ISBN564541" rel="tooltip">
                                        <span class="glyphicon glyphicon-trash"></span>
                                    </button>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                    <button class="btn btn-primary btn-xs" data-toggle="modal"
                        data-target="#ajoutart" data-placement="top" rel="tooltip">
                        <span>Ajouter Article</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

模态类代码：

    <div class="modal fade" id="delete-article" tabindex="-1" role="dialog"
    aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true"></button>
                <h4 class="modal-title custom_align" id="Heading">Delete this
                    entry</h4>
            </div>
            <div class="modal-body">
                <p>some content</p>
                <input type="text" name="id" id="id" value="" />
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <span class="glyphicon glyphicon-warning-sign"></span> Are you
                    sure you want to delete this Record?
                </div>

            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-warning">
                    <span class="glyphicon glyphicon-ok-sign"></span> Yes
                </button>
                <button type="button" class="btn btn-warning">
                    <span class="glyphicon glyphicon-remove"></span> No
                </button>
            </div>
        </div>
    </div>
</div>

和javascript函数：

    <script type="text/javascript">
$(document).on("click", ".open-deleteDialog", function() {
    var ida = $(this).data('id');
    $(".modal-body #id").val(ida);
    // As pointed out in comments, 
    // it is superfluous to have to manually call the modal.
    $('#delete').modal('show');
});

此链接http://jsfiddle.net/Au9tc/605/非常有用

确认后删除记录

1 个答案: