jQuery 标题在用 div 制作的表中排序

Question

我想通过单击每列的标题来对表格内容进行排序。

这个问题已经在这里提出了jQuery table header sort但是 jquery 插件指出(实际上非​​常好)可以与表 html 标签一起使用。如果我的表格是用 div 编写的，是否有一个插件可以使其完全相同。

HTML 示例:

<div class="table">
    <div class="header">
        <div class="col1">col1</div>
        <div class="col2">col2</div>
        <div class="col3">col3</div>        
    </div>    
    <div class="item">
        <div class="col1">content11</div>
        <div class="col2">content21</div>
        <div class="col3">content31</div>            
    </div>
    <div class="item">
        <div class="col1">content12</div>
        <div class="col2">content22</div>
        <div class="col3">content32</div>            
    </div>
</div>  

Answer 1

如果您无法自己编写代码，那么您自己编写代码的基本过程如下。可能听起来很痛苦，但如果您的数据是干净的，jQuery 的选择器将真正帮助您:

• 迭代数据网格，为每个单元格分配 2 个类(一个类对行唯一，一个类对列唯一)。嵌套循环和 jQuery 的 .addClass() 就可以做到这一点。稍后您将需要它们作为 jQuery 选择器。我将在此迭代中包含表标题，但为它们分配“标签”类。

• 使每个表格标题 $(".label") 可点击。

• 当单击 $(.label) 时，获取行或列的类名，并选择所有匹配的单元格。迭代这个数组(html 元素)，并创建每个单元格包含的数据的第二个数组(也许通过 .html())。对该数组进行排序，然后用它来重新填充原始元素数组，就可以了。

听起来可能很复杂，但 jQuery 确实是为这类事情而构建的。祝你好运。