Question

我有一个表格，显示每行的用户详细信息以及启动Bootstrap模式确认对话框的删除按钮。

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

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

HTML表格

<tr>
    <td>jsmith22</td>
    <td>John Smith</td>
    <td>555-555-5555</td>
    <td>test@gmail.com</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', {} );
});

Answer 1

可以使用Bootstrap Modal event listener

执行此操作

将数据属性with tf.name_scope('conv_layer_3'): # ????? wc3 = tf.reshape(_weights['wd1'], [7, 7, w2, d1]) conv3 = conv2d_valid(conv2, wc3, _biases['bd1']) with tf.name_scope('conv_layer_4'): # ??? return out添加到模态触发按钮

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

Fiddle Example

替代解决方案

您可以跳过$('#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>

Alternate Solution Example

Answer 2

您可以获取按钮行的第一个td的内容：

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

小提琴：https://jsfiddle.net/7j4bmgbv/

Bootstrap模态确认

2 个答案: