根据选项 select 更改 table 列顺序

Question

所以，我 table 是这样的：

<table class="ui-responsive ui-shadow gk-decorate table-stripe" is="jqm-table" data-role="table">
    <thead>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
   <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    </tbody>
</table>

并且用户可以根据 select 选项中的过滤器显示某些列。
到目前为止，使用 nth-child select 或 $('td:nth-child(x),th:nth-child(x)').hide();
过滤器效果很好： "A,B,C,F"
例如：而不是原来的 table 他得到了正确的 table:

原版Table滤镜Table

A B C D E F --> A B C F
A B C D E F --> A B C F
A B C D E F --> A B C F
A B C D E F --> A B C F
A B C D E F --> A B C F

我的问题来了，如何更改列的顺序？当我有这样的过滤器时："A, C, B, D"
原版Table滤镜Table

A B C D E F --> A C B D
A B C D E F --> A C B D
A B C D E F --> A C B D
A B C D E F --> A C B D
A B C D E F --> A C B D

更新：
到目前为止我尝试的是使用分离函数来切换列。类似这样的事情：
var cols = $("#tableId").children(td, th);
cols.eq(0).detach().insertBefore(cols.eq(1));
但是从来没有成功过。这是一个Fiddle

Answer 1

是的，伙计，特别是对于像你这样的人 CSS3 Flexbox 是作为解决这些问题的福音而引入的！

FYI: I have done the changes only for "AED" option for you.

您可以使用 Flexbox 轻松解决此问题，your fiddle 已更新并且我还改进了实现目标的方式（最小 javascript 使用过），更干净。

我做了什么？

选择一个选项时，我使用 JS 将 class 添加到所有 tr & 在 CSS 中，我为该 class。优雅干净！
现在要更改顺序，请使用 flexbox。将 display: flex; 添加到要移动的元素的父容器中，在您的情况下，所有 tr 都是父容器，因为您要移动 th 和 td。
现在，无论何时，将名为 order（默认为 0）的属性更改为您要移动的任何元素。简单

注意:: - order 属性值较高的元素将稍后显示。所以基本上元素是根据 order 属性的增加值显示的。 how order works.

如果您有任何疑问，请告诉我。

根据选项 select 更改 table 列顺序

Change table column order based on option select

html

jquery

html-table

jquery-mobile