如何在數據表中創建可折疊列標題？

Question

我有以下代碼。 我想要的是我想通過在它們名稱旁邊添加+和 - 符號來使HR Information列和聯系人列可折疊。 我該怎么做？

<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