Question

我有一个像页面一样的div表，是否可以使用javascript将其排序为html表？

我从普通表中移出，因为由于How to add td rowspans to a table?而无法继续使用它，因此使用了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>

这里的完整代码http://codepen.io/anon/pen/empqyN?editors=110和http://jsfiddle.net/a4fcxzra/

Answer 1

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

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());
    })
})

工作小提琴：http://jsfiddle.net/juvian/a4fcxzra/1/

Answer 2

您可以使用JavaScript对数组进行排序，然后动态创建标记以将其置于列标题中（您应该在html中创建这些标题以获得更好的性能）

如何使div可以排序？

2 个答案: