使用Bootstrap模态框来确认删除表格行。

Question

使用Bootstrap模态框来确认删除表格行。

5

我是一个新手，希望在这里得到一些有用的答案。我正在使用Bootstrap框架设计网站，遇到了一个小问题。我有一个表格，在最后一列中有一个删除按钮，我希望这个按钮可以删除整行。我希望删除按钮激活Bootstrap模态框，在删除之前确认表格行的删除。基本上是一个警告，你要删除条目吗？是或否。显然，是按钮会删除该行。以下是我目前的代码。

HTML ----

<table>
<thead>
    <tr>
        <th>Content 1</th>
        <th>View</th>
        <th>Content 2</th>
        <th>Status</th>
        <th>Edit / View / Delete</th>
    </tr>
</thead>
<!-- start: Table Body -->
<tbody>
    <tr class="btnDelete" data-id="1">
        <td>Content1</td>
        <td><a href="#">View</a>
        </td>
        <td>Content2</td>
        <td>Active</td>
        <td>
            <button id="btnDelete" href="">delete</button>
        </td>
    </tr>
    <tr class="btnDelete" data-id="2">
        <td>Content3</td>
        <td><a href="#">View</a>
        </td>
        <td>Content4</td>
        <td>Active</td>
        <td>
            <button id="btnDelete" href="">delete</button>
        </td>
    </tr>
</tbody>
</table>
 <!--/table-collapse -->
 <!-- start: Delete Coupon Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
             <h3 class="modal-title" id="myModalLabel">Warning!</h3>

        </div>
        <div class="modal-body">
             <h4> Are you sure you want to DELETE?</h4>

        </div>
        <!--/modal-body-collapse -->
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Yes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </div>
        <!--/modal-footer-collapse -->
    </div>
    <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

JS----

      $('#myModal').on('show', function () {
      var id = $(this).data('id'),
          removeBtn = $(this).find('.danger');
  })
   $('#btnDelete').on('click', function (e) {
      e.preventDefault();
      var id = $(this).data('id');
      $('#myModal').data('id', id).modal('show');
  });
  $('.btnDelteYes').click(function () {
      // handle deletion here
      var id = $('#myModal').data('id');
      $('[data-id=' + id + ']').remove();
      $('#myModal').modal('hide');
  });

显然我正在使用Bootstrap CSS等。

我希望提供足够的信息来帮助解决我的问题。

任何帮助都将不胜感激！

这里是一个Fiddle：

- Jason Bash

你有什么问题？ - Vincent Decaux

我已经检查过了，但删除功能无法正常工作，因此我认为我理解了你的问题。有几件事情我会做得不同。首先，可以使用Bootstrap的data-dismiss来单独执行模态隐藏。由于无法确定要删除哪一行，因此需要定义以便您可以使用JavaScript识别和删除TR。 - DivineChef

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyle Needham · Accepted Answer

你有几个问题需要修改：

问题1

id属性必须是唯一的，在你的示例中它被使用了两次。

<button id="btnDelete" href="">delete</button>
<button id="btnDelete" href="">delete</button>

问题 2

你并不需要这段代码，但是如果将来需要使用它，请使用.on('show.bs.modal', func...)

$('#myModal').on('show.bs.modal', function () {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
});

问题 3

$(this) 在这里指的是 btnDelete 按钮，它没有一个 data-id 属性，data-id 是设置在你的 tr 上的。

$('#btnDelete').on('click', function (e) {
    e.preventDefault();
    var id = $(this).data('id');
    $('#myModal').data('id', id).modal('show');
});

这里有修正以上错误的可用 fiddle.