主页 / 问题 / 762813
Accepted
trydex
Asked:2020-12-25 03:48:53 +0000 UTC2020-12-25 03:48:53 +0000 UTC

隐藏表格列和复选框

  • 772

我通过复选框隐藏表格列。JS 代码取自这里。

问题如下。列被隐藏，但复选框未标记为选中。如果您从代码中删除e.preventDefault();，则所有内容都与复选框一致，但列不会隐藏。单击复选框时，没有添加任何类，所以我不明白该怎么做。

如何解决？

    var table = $('#accounts').dataTable();

    $('label.toggle-vis').on('click', function (e) {
        e.preventDefault();
       // Get the column API object
        var column = table.api().column($(this).attr('data-column'));
        // Toggle the visibility
        column.visible(!column.visible());
    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<label class="custom-control custom-checkbox toggle-vis" data-column="0">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Id</span>
</label>

<label class="custom-control custom-checkbox toggle-vis" data-column="1">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Name</span>
</label>

<table id="accounts" class="table">
  <thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
     </tr>
   </thead>
      <tbody>
        <tr>
          <td>1</td><td>Jack</td>
        </tr>
        <tr>
          <td>2</td><td>Peter</td>
        </tr>
      </tbody>
    </table>

javascript

1 个回答

  1. Best Answer
    $('label.toggle-vis input').on('click', function (e) {
   // Get the column API object
   var column = table.api().column($(this).closest("label").data('column'));
   // Toggle the visibility
   column.visible(!column.visible());
});
    • 1

相关问题