Question

所以，我有这样的表：

<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选择器工作得很好：$('td:nth-child(x),th:nth-child(x)').hide();
过滤器看起来像这样："A,B,C,F"例如：相反原始表他得到了右表：

原始表 已过滤表

   A B C D E F - ＆gt; A B C F
  A B C D E F - ＆gt; A B C F
  A B C D E F - ＆gt; A B C F
  A B C D E F - ＆gt; A B C F
  A B C D E F - ＆gt; A B C F

现在我的问题是如何更改列的顺序？当我有这样的过滤器时："A, C, B, D"
原始表 已过滤表

   A B C D E F - ＆gt; A C B D
  A B C D E F - ＆gt; A C B D
  A B C D E F - ＆gt; A C B D
  A B C D E F - ＆gt; A C B D
  A B C D E F - ＆gt; A C B D

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

Answer 1

是的哥们，特别是像你这样的人CSS3 Flexbox被介绍为解决这些问题的福音！

仅供参考：我已经为＆＃34; AED＆＃34;做了更改。选项。

您可以使用 Flexbox 轻松解决此问题，your fiddle已更新＆amp;我也改进了你实现目标的方式（使用最少的javascript），更清洁。

我做了什么？

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

注意:: - 具有更高order属性值的元素将在稍后显示。因此，基本上元素是根据order属性的增加值显示的。 how order works

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

根据选项

1 个答案: