Javascript 如何使div可排序？

我有一个类似于页面的div表，是否可以使用javascript使其像html表一样可排序

我离开了普通表，因为我无法继续使用它，因此使用了div表

所以我用了这个div表，我唯一缺少的是如何使它可排序，这样我就可以按项目或价格对它进行排序。。与datatables一样，tablesorter e.t.c

<div class="Header">    
    <div class="item"><a href="#">Item</a>
    </div>
    <div class="desc"><a href="#">Description</a>
    </div>      
    <div class="price"><a href="#">Price</a>
    </div>    
    <div class="status"><a href="#">Status</a>
    </div>
</div>

<div class="Info">
  <div class="itemName">
    <div class="item">Item 1</div>
  </div>
  <div class="itemInfo">
    <div class="List">
      <div class="Desc">Description 1</div>
      <div class="Box">                
        <div class="price">$79</div>
        <div class="status">16 in stock</div>
      </div>
    </div> 
  </div>
</div>

项目1
说明1
$79
库存16件

---

这里和这里的完整代码

您可以使用JavaScript对数组进行排序，然后动态创建标记以将它们放置在列标题中（您应该在html中创建这些标记以提高性能）

这里是一个排序处理程序：（标题类需要与信息所在的位置相同，因此在标题desc中更改为desc）

var排序=1；
$（“.Header div”）.each（函数（）{
$（此）。单击（函数（）{
var cl=$（this.attr（“class”）//获取头类，这是我获取信息的地方
排序=排序==1？-1:1；//排序asc或desc
$（“.Info”）.detach（）.sort（函数（a，b）{
var str1=$（a）.find（'..+cl.text（）；//获取文本
var str2=$（b）.find（'.'+cl.text（）；
var n1=str1.match（//\d+/）[0]//获取文本中的数字
var n2=str2.match（/\d+/）[0]
如果（n1！=“”）{//如果是一个数字
返回n1*排序>n2*排序；//按编号排序
}else{//按字符串排序
返回排序==1？str1>str2:str1

---

工作小提琴：

可以使用rowSpan创建所需的表格。我不知道为什么你的另一个问题没有得到回答，我刚刚发布了一个关于如何使用rowSpan的答案。你可以在这个答案中使用类似的东西来排列DOM节点列表。谢谢你的输入，vega，我会看看它是如何运行的，然后回复你，sarah，我会看看。非常完美，刚刚将css样式改为Header.Desc，一切都很好。。再次感谢。我遇到了一些问题，如果我更改列表中的任何单词，它都不会起作用。。例如，我制作了另一个项目，称之为gamepad，它不会排序。。不管我放哪个词，我怎么能进行排序呢？是的，因为我把数字字段作为数字处理，所以按1,2,3,4,5对项目进行排序。添加了一个覆盖函数，将

数据类型='string'

放在标题中：

var sorting=1;
$(".Header div").each(function(){
    $(this).click(function(){
        var cl=$(this).attr("class") // get header class, this is where I get info from
        sorting = sorting == 1 ? -1 : 1 ;         // sorting asc or desc
        $(".Info").detach().sort(function(a,b){
            var str1=$(a).find('.'+cl).text(); // get text
            var str2=$(b).find('.'+cl).text();
            var n1 = str1.match(/\d+/)[0] //get digits in text
            var n2 = str2.match(/\d+/)[0]
            if(n1 != '' ){ // if its a number
                return n1*sorting > n2*sorting; // sort by number
            }else{ // sort by string
                return sorting == 1 ? str1 > str2 : str1 < str2
            }
        }).appendTo($(".Header").parent());
    })
})