2017-08-16 59 views
-3

我有一個表,我想根據來自選擇框(下拉id="bil")的輸入按照日期的升序或降序排序表。使用jQuery或JavaScript按升序或降序排序表

var itemsAscend = []; 
 
var itemsDescend = []; 
 
$('#bil').on('change', function() { 
 
    var itemsAscend1 = []; 
 
    itemsAscend = itemsAscend1; 
 
    var itemsDescend1 = []; 
 
    itemsDescend = itemsDescend1; 
 
    $('#tabbody tr td:nth-child(2)').each(function() { 
 
    //add item to array 
 
    itemsAscend.push($(this).text()); 
 
    itemsDescend.push($(this).text()); 
 
    }); 
 

 
    itemsAscend.sort((d1, d2) => new Date(d1) - new Date(d2) > 0); 
 
    itemsDescend.sort((d1, d2) => new Date(d1) - new Date(d2) < 0); 
 
    
 
    
 
    var selectedValue = this.value; 
 
    $('#tabbody tr').hide(); 
 

 
    // var selects = itemsAscend; 
 
    // var selects1 = itemsDescend; 
 
    // console.log(selects) 
 
    // console.log(itemsAscend.reverse()) 
 
    if (selectedValue === "Ascend") { 
 
    for (var i = 0; i < itemsAscend.length; i++) { 
 
     $(itemsAscend[i]).parents('tr').show(); 
 
    } 
 
    } else if (selectedValue === "Descend") { 
 
    for (var i = 0; i < itemsDescend.length; i++) { 
 
     $(itemsDescend[i]).parents('tr').show(); 
 
    } 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <div> 
 
    <select class="form-control" id="bil" style=""> 
 
     <option value=""></option> 
 
     <option value="Ascend">Ascend</option> 
 
     <option value="Descend" selected="">Descend</option> 
 
    </select> 
 
    </div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>S.NO</th> 
 
     <th>Date</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="tabbody"> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>01-Oct-15</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2</td> 
 
     <td>01-Jan-16</td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     <td>20-Jun-17</td> 
 
     </tr> 
 
     <tr> 
 
     <td>4</td> 
 
     <td>05-Dec-17</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

我曾嘗試使用上面的代碼試過,但我沒有得到期望的結果。

+1

你跟橡皮鴨子最近還好嗎? https://ericlippert.com/2014/03/05/how-to-debug-small-programs/ – jmoon

+0

「沒有結果」是什麼意思?你有什麼錯誤嗎? – Bergi

+0

您應該在''內放置'