單擊時按字母順序排列div

我有一個有五列的網格。有什麼方法可以在點擊特定標題時對列進行排序？例如，點擊名稱時，列按升序排序，反之亦然。我不使用表格。所有的數據都使用divs`單擊時按字母順序排列div

<div class="Table" id="tab"> 
 
    <div class="Title"> 
 
     <p>Financial data</p> 
 
    </div> 
 
    <div class="Heading"> 
 
     <div class="Cell"> 
 
      <p>Name</p> 
 
     </div> 
 
     <div class="Cell"> 
 
      <p>Plan</p> 
 
     </div> 
 
     <div class="Cell"> 
 
      <p>Forecast</p> 
 
     </div> 
 
     <div class="Cell"> 
 
      <p>Best Case</p> 
 
     </div> 
 
     <div class="Cell"> 
 
      <p>Commit</p> 
 
     </div> 
 
    </div> 
 

 
    <!-- Structure to display the JSON Data--> 
 

 

 
    <div class="Row"> 
 
     <div class="Cell"> 
 
      <p id="country_name1"></p> 
 
     </div> 
 
     <div class="Cell"> 
 
      <p id="plan_1"></p> 
 
     </div> 
 
     <div class="Cell"> 
 
      <p id="forecast_1"></p> 
 
     </div> 
 
     <div id="col3" class="Cell"> 
 
      <p id="best_case1"></p> 
 
      <p class="ftype" id="best_case1.1"></p> 
 
     </div> 
 
     <div id="col4" class="Cell"> 
 
      <p id="commit1"></p> 
 
      <p class="ftype" id="commit1.1"></p> 
 
     </div> 
 
    </div>

可以這樣做使用JavaScript或jQuery的顯示？

來源

2017-05-28 Abhishek

它可以與不同的插件來實現，例如：

TinySort（改寫在純JavaScript，兼容的div） http://tinysort.sjeiti.com

數據表（jQuery的） https://datatables.net/examples/basic_init/table_sorting.html

Tablesorter（jQuery） http://tablesorter.com/docs/個

上Tympanus 其他例子https://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/

來源

2017-05-28 22:09:51 hacklover

是的，但我沒有桌子標籤。我有div – Abhishek

剛剛編輯添加TinySort，後來我讀了關於div – hacklover

你可以把它放在一個數組，然後你可以排序使用，如果你把所有具有相同類的名稱，你可以把它像

var x = document.getElementsByClassName("Name").innerHTML; 
x.sort(function(a, b) { return b - a }); 

for (var i = 0; i < x.length; i++) { 
    document.getElementsByClassName("Name").innerHTML = x[i] ; 
}

來源

2017-05-28 22:29:38

單擊時按字母順序排列div

回答

相關問題