Bootstrap 模态框确认

Question

我有一个表格，每行显示用户详细信息和一个“删除”按钮，点击后会弹出Bootstrap模态确认对话框。

我的目标是让确认按钮触发一个事件，删除特定的用户。

我该如何将表格行中的jsmith22传递到我的Javascript函数中？

HTML表格

<tr>
    <td>jsmith22</td>
    <td>John Smith</td>
    <td>555-555-5555</td>
    <td>[e-mail]</td>
    <td><button type="button" class="btn btn-default btn-lg btn-block roster-button active" data-toggle="modal" data-target="#removeUser">Remove</button></td>
</tr>

弹出对话框

<div aria-labelledby="myModalLabel" class="modal fade" id="removeUser"
role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Remove Employee</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you wish to remove this user?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
                <button class="btn btn-danger" id="remove-button" type="submit">Remove</button>
            </div>
        </div><!-- end modal-content -->
    </div><!-- end modal-dialog -->
</div><!-- end modal -->

Javascript

// Remove button event trigger
$('#remove-button').click(function() {
        $.post('/API/removeUser', {} );
});

- kernelpanic

Answer 1

可以使用Bootstrap Modal事件监听器实现。

在模态框触发按钮上添加数据属性data-id。

<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>

在模态框中添加type="hidden"的输入，并在显示时将id值传递给模态框中的隐藏输入。

隐藏输入

<input type="hidden" id="RowId" value="">

模态框事件 show 脚本

$(document).ready(function(){
    $('#removeUser').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id');
        $('#RowId').val(id);
     });
});

现在支持 click 事件。

$('#remove-button').click(function() {
        var delid = $('#RowId').val();
        //Do what ever you like to do
        $.post('/API/removeUser', {} );
});

示例

---

备选方案

您可以跳过 hidden 输入并创建一个全局变量。

具有数据属性 data-id 的模态触发按钮，用于模态触发按钮。

<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>

模态框事件，使用全局变量的点击功能脚本

$(document).ready(function() {
  var delid = ''; //global variable
  $('#removeUser').on('show.bs.modal', function(e) {
    delid = $(e.relatedTarget).data('id'); //fetch value of `data-id` attribute load it to global variable
    alert(delid);
  });

  $('#remove-button').click(function() {
    alert(delid); //Use the global variable here to del the record
    //Do what ever you like to do
    //$.post('/API/removeUser', {} );
  });
});

备选方案示例

（此处为链接，不予翻译）

- Shehary

---

谢谢！正是我所需要的。 - kernelpanic

Answer 2

您可以通过以下方式获取按钮行的第一个td的内容：

var person = $(this).closest('tr').find('td').eq(0).html()

代码编辑器：https://jsfiddle.net/7j4bmgbv/

- Cory