单击时按字母顺序排序div

Question

我有一个有五列的网格。有没有办法在单击特定标题时对列进行排序？例如，单击名称时，列按升序排序，反之亦然。我不是在使用桌子。所有数据都使用divs`

显示

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 可以使用javascript或jquery完成吗？

Answer 1

可以使用不同的插件完成，例如：

TinySort （在纯Javascript中重写，与div兼容） http://tinysort.sjeiti.com

数据表（jQuery） https://datatables.net/examples/basic_init/table_sorting.html

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

关于鼓室的其他例子 https://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/

Answer 2

你可以将它保存在一个数组中，然后你就可以使用sort，如果你把所有的名字都放在同一个类中就可以了，就像

一样

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