jQuery，通过单击标题使用 colspan 对表列进行排序

Question

我想使用 jQuery 对表格进行排序。该表有 4 列的行和 1 列的行（在单击前面的 4 列时显示）。是否可以按 4 列行的值对表格进行排序？所以e。 G。单击标题 2 后，假设第一次单击执行升序排序，表格将反转。

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>1</td><td>XYZ</td><td>456</td><td>0</td></tr>
<tr class="inside"><td colspan="4">Inside text</td></tr>
<tr><td>859</td><td>IOI</td><td>132</td><td>9</td></tr>
<tr class="inside"><td colspan="4">Inside text</td></tr>
<tr class="inside"><td colspan="4">Another inside text</td></tr>
<tr><td>798</td><td>GJOI</td><td>798</td><td>12</td></tr>
<tr class="inside"><td colspan="4">Inside text</td></tr>
</table>

Answer 1

我认为这个 jquery 插件非常符合您的要求。

click here

Answer 2

你可以使用tablesorter插件：

$(function () {
  $("table").tablesorter();
});

table.tablesorter {
  font-family:arial;
  background-color: #CDCDCD;
  margin:10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
}
table.tablesorter thead tr .header {
  background-image: url(bg.gif);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}
table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}
table.tablesorter tbody tr.odd td {
  background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
  background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
  background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;
}    

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.6/js/jquery.tablesorter.min.js"></script>

<table class="tablesorter">
    <thead>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>XYZ</td>
        <td>456</td>
        <td>0</td>
    </tr>
    <tr class="inside">
        <td colspan="4">Inside text</td>
    </tr>
    <tr>
        <td>859</td>
        <td>IOI</td>
        <td>132</td>
        <td>9</td>
    </tr>
    <tr class="inside">
        <td colspan="4">Inside text</td>
    </tr>
    <tr class="inside">
        <td colspan="4">Another inside text</td>
    </tr>
    <tr>
        <td>798</td>
        <td>GJOI</td>
        <td>798</td>
        <td>12</td>
    </tr>
    <tr class="inside">
        <td colspan="4">Inside text</td>
    </tr>
    </tbody>
</table>