Javascript DataTables响应：隐藏列时删除行

我正在使用创建网格

这是一个很好的工具，但我有一个问题，当网格列被隐藏时，例如在移动设备或其他小型设备上，没有足够的空间来显示所有列时，就会出现这个问题

问题：

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>

  </tbody>
</table>

$(document).ready(function() {
  $('#example').DataTable({
    responsive: true
  });
});

$(".removeRow").click(function() {
  var table = $('#example').DataTable();
  table.row($(this).parents('tr')).remove().draw();
});

$(document).on("click", ".removeRow", function() {
    var table = $('#example').DataTable();  
  var row;

  console.log($(this).closest('table'));
  if($(this).closest('table').hasClass("collapsed")) {
    var child = $(this).parents("tr.child");
    row = $(child).prevAll(".parent");
  } else {
    row = $(this).parents('tr');
  }

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

});

隐藏列时删除网格行。当“是”列显示时，它工作正常

表格代码：

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>

  </tbody>
</table>

$(document).ready(function() {
  $('#example').DataTable({
    responsive: true
  });
});

$(".removeRow").click(function() {
  var table = $('#example').DataTable();
  table.row($(this).parents('tr')).remove().draw();
});

$(document).on("click", ".removeRow", function() {
    var table = $('#example').DataTable();  
  var row;

  console.log($(this).closest('table'));
  if($(this).closest('table').hasClass("collapsed")) {
    var child = $(this).parents("tr.child");
    row = $(child).prevAll(".parent");
  } else {
    row = $(this).parents('tr');
  }

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

});

我附上链接到。您可以清楚地看到，当显示列时，它会工作，而当隐藏列时，它会中断

---

我想知道是否有其他人遇到过类似的问题，如果有任何帮助，我们将不胜感激。

我已经设法解决了这个问题。我决定把它贴出来，以防其他人也有类似的问题

这不起作用，因为列折叠时HTML结构会发生变化。为了解决这个问题，我添加了额外的检查，以验证列是否折叠

修订代码：

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>

  </tbody>
</table>

$(document).ready(function() {
  $('#example').DataTable({
    responsive: true
  });
});

$(".removeRow").click(function() {
  var table = $('#example').DataTable();
  table.row($(this).parents('tr')).remove().draw();
});

$(document).on("click", ".removeRow", function() {
    var table = $('#example').DataTable();  
  var row;

  console.log($(this).closest('table'));
  if($(this).closest('table').hasClass("collapsed")) {
    var child = $(this).parents("tr.child");
    row = $(child).prevAll(".parent");
  } else {
    row = $(this).parents('tr');
  }

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

});

现在很好用

---

此处已更新。

我已设法解决此问题。我决定把它贴出来，以防其他人也有类似的问题

这不起作用，因为列折叠时HTML结构会发生变化。为了解决这个问题，我添加了额外的检查，以验证列是否折叠

修订代码：

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Remove</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>
        <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
      </td>
    </tr>

  </tbody>
</table>

$(document).ready(function() {
  $('#example').DataTable({
    responsive: true
  });
});

$(".removeRow").click(function() {
  var table = $('#example').DataTable();
  table.row($(this).parents('tr')).remove().draw();
});

$(document).on("click", ".removeRow", function() {
    var table = $('#example').DataTable();  
  var row;

  console.log($(this).closest('table'));
  if($(this).closest('table').hasClass("collapsed")) {
    var child = $(this).parents("tr.child");
    row = $(child).prevAll(".parent");
  } else {
    row = $(this).parents('tr');
  }

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

});

现在很好用

---

此处已更新。

不明白当按两行上的“删除”键时小提琴中的“中断”是什么意思，它按预期工作。Nvm我明白你的意思。原因是html的结构在响应开始时会发生变化。此外，当它响应时，在按下加号图标后，您的删除按钮会添加到dom中。所以它没有附带任何事件。所以你有两个问题。“删除”按钮不再是要删除的tr的子按钮，并且没有附加任何事件。也许您可以尝试“$（文档）。在（“单击”、“.removeRow”上，函数（）{.EDIT:即使这样也很有必要，因为子元素是动态添加的。您需要实现另一个附加方法，该方法必须响应此更改谢谢您的提示，我已设法解决了此问题。我将很快发布答案。我不明白您所说的“中断”是什么意思在小提琴中，当在两行上按remove时，它会按预期工作。Nvm我明白你的意思。原因是html的结构在响应开始时会发生变化。此外，当它响应时，你的remove按钮会在按下plus图标后添加到dom中。因此，没有附加到它的事件。因此，你有两个问题“删除”按钮不再是要删除的tr的子项，并且没有附加任何事件。也许您可以尝试“$（文档）。在（“单击”、“.removeRow”、函数（）上{.EDIT:即使是这样也很有必要，因为子元素是动态添加的。您需要实现另一个附加方法，该方法必须响应此更改谢谢您的提示，我已成功解决了此问题。我将很快发布答案。