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

另外，我不能把按钮对象放在数据属性中。您必须放置某种唯一标识符。

这样的事情可以起作用

$('#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();

希望它有所帮助！

＆＃13;

$(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');
});

＆＃13;

table {
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

如何将我的开放模态按钮作为参数发送到我的模态？

2 个答案: