jQuery，通過點擊標題對colspan進行排序表列

Question

我想使用jQuery對錶進行排序。該表的行有4列和行（在點擊前面的4列後顯示）和1列。是否可以通過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>