根据行 ID 以任意顺序重新排序表行

Posted 2023-05-08

【中文标题】根据行 ID 以任意顺序重新排序表行

【英文标题】：Reorder table rows in an arbitrary order based on row ids

【发布时间】：2017-07-18 18:24:25

【问题描述】：

我想使用 jQuery 根据我在用户单击链接或按钮时选择的 任意 顺序对某些表行重新排序。 （注意：我不是根据单元格或列标题的字母/数字内容对表格行进行排序 - 我知道有像“动画表格排序器”这样的 js 插件）

这是我的代码示例：

<ul>
    <li><a id="custom-sort-1" href="#">Custom Sort 1</a></li>
    <li><a id="custom-sort-2" href="#">Custom Sort 2</a></li>
</ul>

<table>
    <tr id="row-a">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr id="row-b">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr id="row-c">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr id="row-d">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
</table>

我想要发生的事情：

单击“#custom-sort-1”将重新排列表格行：row-c， 行-a、行-d、行-b 单击“#custom-sort-2”将重新排序 表格行：row-a、row-c、row-b、row-d

我将如何使用 Jquery 来做到这一点？

作为一项附加功能 - 您将如何为不断变化的行顺序设置动画？

【问题讨论】：

你可以使用 css (:checked, flex and order): 为了好玩: codepen.io/gc-nomade/pen/EWjqKQ 但没有动画移动它们

哈！这非常聪明 - 不一定要依赖 js。

【参考方案1】：

可以使用 jQuery 将元素作为列表获取，枚举它们，从 ID 构建一个 javascript 数组，使用数组对象的内置 .sort() 方法通过提供自定义比较函数来使用 javascript包括任意排序的逻辑（需要保留一个带有按钮单击值的变量），然后使用 jQuery 使用 jQuery 方法重新排列元素以进行 DOM 操作，例如：.add()、.insert()、. append(), .after() 并在其中包含动画。

【讨论】：

谢谢 - 这在理论上听起来确实是正确的。我想这是我正在寻找的实际语法示例，因为我是 JS 前端的新手 - 因此问题:)