javascript - 如何在数据表中创建可折叠列标题？

Question

我有下面的代码。我想要的是通过在名称旁边添加 + 和 - 符号，使 HR 信息栏和联系人栏可折叠。我该怎么做？

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"
   rel="stylesheet">
<link href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css"
   rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="stripe row-border order-column table table-condensed table-striped table-bordered" style="width:100%"  >
   <thead>
      <tr>
         <th rowspan="2">Name</th>
         <th colspan="2" class="header-1"  name="speed">HR Information <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /></th>
         <th colspan="4">Contact</th>
      </tr>
      <tr class="this_h">
         <th id="hrcolumn" class="x"  name="speed">Position</th>
         <th>Salary</th>
         <th>Office</th>
         <th>Extn.</th>
         <th>E-mail</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td>$320,800</td>
         <td>Edinburgh</td>
         <td>5421</td>
         <td>t.nixon@datatables.net</td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td>$170,750</td>
         <td>Tokyo</td>
         <td>8422</td>
         <td>g.winters@datatables.net</td>
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
         <td>$86,000</td>
         <td>San Francisco</td>
         <td>1562</td>
         <td>a.cox@datatables.net</td>
      </tr>
   </tbody>
</table>
$(document).ready(function() {
    var table = $('#example').DataTable({
        scrollY: "300px",
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns: true
    });
});
th, td {
    white - space: nowrap;
    padding - left: 40 px!important;
    padding - right: 40 px!important;
}
div.dataTables_wrapper {
    width: 800 px;
    margin: 0 auto;
}

Answer 1

我不认为将图标放在列名称旁边是最好的主意，因为当您隐藏列时，图标本身也会被隐藏。

取而代之的是，我在表格上方添加了两个更好用的复选框。

<p>Toggle HR Info <input id="hrCheck" type="checkbox" /></p>
<p>Toggle Contact Info <input id="contactCheck" type="checkbox" /></p>

我必须修复 Contact 列的 colspan，因为它需要为 3 而不是 4。

这是一个有效的 jsbin:https://jsbin.com/kaloxokadu/edit?html,js,output