如何将打开的模态按钮作为参数发送给模态？

Question

我正在使用数据表，并添加了删除按钮以从表中删除行。 这是一些HTML

我的模态：

     <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Confirm Remove</h4>
                </div>
                <div class="modal-body">
                    <label for="version" class="control-label">Removing a row from the table cannot be undone. Are you sure you want to continue</label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger btn-ok"  >Remove</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End -->

我的删除按钮

<td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td>

我可以打开模式，但是当我单击“删除”时，什么也没有发生。 这是我的.js文件中的一些代码

function removeRow(btn) {
    var table = $('#Table').DataTable({"retrieve": true});
    var row = $(btn).closest('tr');
    if(row) {
        table.row(row).remove().draw();
    }

}


$('#myModal').on('show.bs.modal', function(e) {
    var button = e.relatedTarget;
    $('.btn-ok', this).data('button', button);
});



$('#myModal').on('click', '.btn-ok', function(e) {
    var button = $(this).data('button');
    removeRow(button);
});

我究竟做错了什么？

Answer 1

您错过了. 在您的jquery事件代码中。

因此，而不是btn-ok做到这一点.btn-ok

另外，我不能将按钮对象放在data属性内。 您将必须放入某种唯一标识符。

所以这样的事情可能会起作用

$('#myModal').on('show.bs.modal', function(e) {
    var button = e.relatedTarget.attr("id");
    $('.btn-ok').attr('data-target', id);
});

$('#myModal').on('click', '.btn-ok', function(e) {
   var button = $(this).attr('data-target');
   removeRow(target);
});


function removeRow(target) {
   var table = $('#Table').DataTable({"retrieve": true});
   var row = $("#"+target).closest('tr');
if(row) {
    table.row(row).remove().draw();
 }
}

Answer 2

使用Try and Catch语句代替If 。

你用：

table.row（行）一个.remove（）绘制（）;

代替：

row.remove();
table.draw();

希望能帮助到你！

 $(document).ready(function() { $('#Table').DataTable(); } ); function removeRow(btn) { var table = $('#Table').DataTable({ "retrieve": true }); var row = $(btn).closest('tr'); try { row.remove(); table.draw(); } catch(e) { console.log('Error Message: ' + e); } } $('#myModal').on('show.bs.modal', function(e) { var button = e.relatedTarget; $('.btn-ok', this).data('button', button); }); $('#myModal').on('click', '.btn-ok', function(e) { var button = $(this).data('button'); removeRow(button); $('#myModal').modal('hide'); }); 

 table { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" > <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" ></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <table id="Table"> <tr> <td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td> <td>First Row</td> </tr> <tr> <td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td> <td>Second Row</td> </tr> </table> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Confirm Remove</h4> </div> <div class="modal-body"> <label for="version" class="control-label">Removing a row from the table cannot be undone. Are you sure you want to continue</label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger btn-ok" >Remove</button> </div> </div> </div> </div>