jQuery，通过单击标题对colspan排序表列

Question

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

$("#input").val()

Answer 1

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

click here

Answer 2

您可以使用tablesorter插件：

＆＃13;

＆＃13;

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

＆＃13;

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;
}    

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;