javascript - 不想复制 Jquery 中的隐藏行

Question

我有一个表，在其中创建了一个用于删除行的按钮和“复制”选项:我的问题是删除按钮工作正常，但是，在删除该行后，它仍然可以处理已删除的行，而我不这样做希望您可以运行一个工作示例的代码片段。我想要的是删除行后，复制按钮仅复制可见行，而不复制隐藏行...请帮助提前致谢:

// Code for Remove Rows
$('.table tbody').on('click', '.btn', function() {
  $(this).closest('tr').remove();
});
// Code For Export Option           
$(document).ready(function() {
  $('#enquirytable').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy',
    ]
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css">
<table class="table table-hover table-striped table-bordered" id="enquirytable">
  <thead>
    <tr>
      <th>admission_no</th>
      <th>roll_no</th>
      <th>Action </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Student 1</td>
      <td>95</td>
      <td class="text-center"><button type="button" class="btn">Remove</button></td>
    </tr>
    <tr>
      <td>Student 2</td>
      <td>105</td>
      <td class="text-center"><button type="button" class="btn">Remove</button></td>
    </tr>
    <tr>
      <td>Student 3</td>
      <td>110</td>
      <td class="text-center"><button type="button" class="btn">Remove</button></td>
    </tr>
  </tbody>
</table>

Answer 1

您正在从 html 中删除行，但它也需要从数据表对象中删除。在变量中设置数据表并使用它删除行并重新绘制表格。见下面的代码

 // Code For Export Option           
 $(document).ready(function() {
    var enquiryTable = $('#enquirytable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 
        ]
    });

   $('.table tbody').on('click', '.btn', function(){
        enquiryTable
        .row( $(this).closest('tr') )
        .remove()
        .draw();
   });
 });