如何使用選擇標簽對表格列進行排序<select>?

Question

我正在嘗試對表中的列進行排序。 我能夠通過單擊表格標題（使用此$('th').click(function(){ )對表格列進行排序，但我想使用選擇選項對表格列進行排序，但我無法這樣做.

我在選擇選項中使用類sort-item ，然后在 jquery 中使用該sort-item類，但它不起作用......你能幫我嗎？

 $('sort-item').click(function(){ var table = $(this).parents('table').eq(0) var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) this.asc = !this.asc if (!this.asc){rows = rows.reverse()} for (var i = 0; i < rows.length; i++){table.append(rows[i])} }) function comparer(index) { return function(a, b) { var valA = getCellValue(a, index), valB = getCellValue(b, index) return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB) } } function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="btn-group "> <div class="sort">Sort : </div> <select class="sort"> <option value="0">All</option> <option class="sort-item" value="1">Received</option> <option class="sort-item" value="2">Due</option> </select> </div> <div class="table zui-wrapper table-responsive " > <div class="zui-scroller "> <table id="indextable" class="zui-table table " > <thead> <tr> <th scope="col" class="zui-sticky-col">Name</th> <th scope="col">id</th> <th scope="col">Complexity</th> <th scope="col">Received</th> <th scope="col">Language</th> <th scope="col">Status</th> <th scope="col" class="float-right">Due </th> </tr> </thead> <tbody> <tr> <td class="zui-sticky-col"> <a> A</a> </td> <td><a>123456789</a></td> <td><a>Medium</a></td> <td><a>01/01/20</a></td> <td><a>French</a></td> <td><a>Designed By A</a> </td> <td ><a>1/05/20</a> </td> </tr> <tr> <td class=" zui-sticky-col"> <a >B</a> </td> <td><a>12345678</a></td> <td><a>Medium</a></td> <td><a>02/05/20</a></td> <td><a>French</a></td> <td><a>Designed By j</a></td> <td> <a>2/05/20</a> </td> </tr> <tr> <td class="zui-sticky-col"> <a>C</a> </td> <td><a>1234567</a></td> <td><a>Medium</a></td> <td><a>02/02/20</a></td> <td><a>French</a></td> <td><a>Designed By j</a></td> <td> <a> 12/05/20</a> </td> </tr> <tr> <td class=" zui-sticky-col"> <a>D</a> </td> <td><a>123456</a></td> <td><a>Medium</a></td> <td><a>03/03/20</a></td> <td><a>French</a></td> <td><a>Designed by G</a></td> <td> <a>12/05/20</a> </td> </tr> <tr> <td class=" zui-sticky-col "> <a>E</a> </td> <td><a >12345</a></td> <td><a >Medium</a></td> <td><a>04/04/20</a></td> <td><a>French</a></td> <td><a>Designed by E</a></td> <td> <a>12/05/20</a> </td> </tr> <tr> <td class=" zui-sticky-col "> <a>F</a> </td> <td><a>1234</a></td> <td><a>Medium</a></td> <td><a>05/05/20</a></td> <td><a>French</a></td> <td><a >Designed by F</a></td> <td > <a> 12/05/20</a> </td> </tr> <tr> <td class="zui-sticky-col"> <a >G</a> </td> <td><a>123</a></td> <td><a>Medium</a></td> <td><a>06/06/20</a></td> <td><a>French</a></td> <td><a>Designed by D</a></td> <td> <a>12/05/20</a> </td> </tr> <tr> <td class="zui-sticky-col "> <a>H</a> </td> <td><a >12</a></td> <td><a >Medium</a></td> <td><a >07/07/20</a></td> <td><a>French</a></td> <td><a>Designed by B</a></td> <td > <a> 12/05/20</a> </td> </tr> <tr> <td class="zui-sticky-col"> <a >I</a> </td> <td><a >1</a></td> <td><a >Medium</a></td> <td><a >08/08/20</a></td> <td><a >French</a></td> <td><a >Designed by C</a></td> <td style="float: right"> <a>12/05/20</a> </td> </tr> </tbody> </table> </div> </div>

Answer 1

這個可以用嗎

$(".sort").change(function (){

});