在HTML表格布局中重新定位列及其内容

Question

我正在使用表格作为报告用户界面

就像这样

现在，我正在改变它，我可以重新排列表格的列，以便我可以轻松地制作新的重新排列的报告。

像：

我已经使用Jquery draggable和sortable完成了表头。但不知道如何使用标题重新定位相应的列。

请帮助。

Answer 1

您需要从<thead>获取该列的索引，并将移动应用于tbody中的所有列。

有许多可用的插件 - 请参阅Google https://www.google.co.uk/search?q=jquery+ui+draggable+column以获得

等结果

• http://akottr.github.io/dragtable/（IE7 +）另见http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable/
• 旧问题Drag and drop sorting of table columns with jQuery
• 回答上面的问题，上面列出了akkotr的dragtable.js和http://jebaird.com/demos/dragtable/作为例子（从akottr's dragtable分叉）。

akottr使用一种方法，将css类附加到您尝试拖动的列，获取该列的索引，找到该索引的元素（使用thtb.find('> tr > td:nth-child(' + i + ')')，然后比较原始索引您想要将列移动到的位置（请参阅函数_bubbleCols） 然后，它使用一个名为swapNodes的函数，该函数将选择的列与新位置的列交换。

有一些聪明的东西，比如异步重新排列表，处理内部表，firefox修复，对（un）支持的msie行为的评论等等。