Question

我有一组显示像表格的DIV，但不在HTML表格中。结构是这样的：

   <div id="queryResult" style="display: block;">
   <div class="rRow">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>
   <div class="rRow">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">39.100</div>
      <div class="rCell4">26.48550</div>
   </div>   
   <div class="clr"></div>
</div>

显示时看起来像这样：

所以我想要的是能够通过单击列标题或其他内容对列进行排序。我知道有一些jQuery / JavaScript库就像sorttable一样，但我找到的所有库都需要一个HTML表。

我是否会咬紧牙关并将其切换到桌子上，还是有其他合理（更简单）的解决方案？

Answer 1

这是一个解决方案。我在你的html中添加了一些类来获得更多控制权。

HTML：

<div id="queryResult" style="display: block;">
   <div class="rRow header">
      <div class="rCell4">Job</div>
      <div class="rCell4">Company</div>
      <div class="rCell4">Customer</div>
      <div class="rCell4">Product</div>
      <div class="rCell4">Balance</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46549</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">VDry Transload</div>
      <div class="rCell4">XYZ co</div>
      <div class="rCell4">38.100</div>
      <div class="rCell4">18.48550</div>
   </div>
   <div class="rRow body">
      <div class="rCell4 editMe">46623</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">Dry Transload</div>
      <div class="rCell4">MNOP co</div>
      <div class="rCell4">31.100</div>
      <div class="rCell4">29.48550</div>
   </div>
  <div class="rRow body">
      <div class="rCell4 editMe">46145</div>
      <div class="hideMe coID">1</div>
      <div class="rCell4 coName">ADry Transload</div>
      <div class="rCell4">JKH co</div>
      <div class="rCell4">42.100</div>
      <div class="rCell4">16.48550</div>
   </div>
   <div class="clr"></div>
</div>

这是一个用于排序的jQuery：

jQuery的：

$('.header').children('.rCell4').each(function(index){
  $(this).click(function(){
    var container = $('#queryResult');
    var header = $('.header');
    var cmpCols = [];
    $('.body').each(function(){
      cmpCols.push($(this).children('.rCell4').eq(index));
    });
    for(i=0; i<cmpCols.length-1; i++){
      for(j=i; j<cmpCols.length; j++){
        if(cmpCols[i].text() > cmpCols[j].text()){
          var tmp = cmpCols[i];
          cmpCols[i] = cmpCols[j];
          cmpCols[j] = tmp;
        }
      }
    }
    container.html(header);
    for(i=0; i<cmpCols.length; i++){
      container.append(cmpCols[i].parent());
    }
  });
});

Working jsFiddle Example.

Answer 2

如果您为每个<div class="rRow">元素添加了唯一的id，则可以使用jQuery .insertAfter();重新排序它们

e.g。对

<div class="rRow" id="row1">
      ...
</div>
<div class="rRow" id="row2">
      ...
</div>

你使用$（＆＃39;＃row1＆＃39;）。insertAfter（＆＃39;＃row2＆＃39;）;翻转两行的位置。

然后你只需要一个函数来读取特定＆＃34;列中的每个值＆＃34;响应标题上的onclick事件，获取该列中的值，对它们进行排序，然后对行重新排序。

使用jquery对HTML表中的元素进行排序

2 个答案: